根据过滤逻辑加载更多项目 [英] Load more items based on filter logic

问题描述

这里的逻辑..

1. 在装入div容器时，必须根据li选择的ID进行显示.李爱德div ID必须匹配并显示.其他人将被隐藏.

1. On load div container have to show based on the li selected id. Li ID & div ID have to match and show. Others will be hidden.

在初始负载下，它仅需显示3个项目(基于ID的过滤后).点击加载更多"链接时，每次点击必须显示另外6个链接.必须保留基于ID的过滤器.

On intial load, it have to show only 3 items (after filtered based ID). On click "load more" link.. it have to show further 6 on each click. Filter based on ID have to maintained.

提前感谢您的帮助！

HTML:

<ul>
  <li class="slist selected" id="ele1"><a href="javascript:;">Element 1</a></li>
  <li class="slist" id="ele2"><a href="javascript:;">Element 2</a></li>
</ul>


<div class="cwrapper">
  <div class="contentEle">
    <div class="content ele1">
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ve...
    </div>
    <div class="content ele2">
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ve...
    </div>
  </div>
  <a href="javascript:;" class="load-more">Load more</a>
</div>

JS:

$('.slist').each(function () {
if($(this).hasClass('selected')) {
$('.cwrapper .contentEle > div.content').hide();
var $postDiv = $('.' + $(this).attr('id')).size();
    var $divEle = 3;
    $('.' + $(this).attr('id'):lt('+$divEle+')).fadeIn(600);
    $('div.content:lt('+$divEle+')').show();

    $('.load-more').click(function () {
      $divEle = ($divEle + 6 <= $postDiv) ? $divEle + 6 : $postDiv;
      $('.cwrapper .contentEle > div.content:lt('+$divEle+')').show();
    });    
 }
});

推荐答案

您可以使用简单的过滤器，例如

You can use a simple filter like

jQuery(function($) {
  var $els = $('.contentEle .content').hide(),
    $curr;

  $('.slist').on('click', function() {
    var $this = $(this);
    $this.addClass('selected');
    $curr = $els.filter('.' + this.id).hide();
    $curr.slice(0, 3).show();
    $els.not($curr).hide();
  }).filter('.selected').click();

  $('.load-more').click(function() {
    $curr.filter(':hidden').slice(0, 6).show();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li class="slist selected" id="ele1"><a href="javascript:;">Element 1</a>
  </li>
  <li class="slist" id="ele2"><a href="javascript:;">Element 2</a>
  </li>
  <li class="slist" id="ele3"><a href="javascript:;">Element 3</a>
  </li>
  <li class="slist" id="ele4"><a href="javascript:;">Element 4</a>
  </li>
</ul>
<div class="cwrapper">
  <div class="contentEle">
    <div class="content ele1">1:1</div>
    <div class="content ele1">1:2</div>
    <div class="content ele1">1:3</div>
    <div class="content ele1">1:4</div>
    <div class="content ele1">1:5</div>
    <div class="content ele1">1:6</div>
    <div class="content ele1">1:7</div>
    <div class="content ele1">1:8</div>
    <div class="content ele1">1:9</div>
    <div class="content ele1">1:10</div>
    <div class="content ele1">1:11</div>
    <div class="content ele1">1:12</div>
    <div class="content ele2">2:1</div>
    <div class="content ele2">2:2</div>
    <div class="content ele2">2:3</div>
    <div class="content ele2">2:4</div>
    <div class="content ele2">2:5</div>
    <div class="content ele2">2:6</div>
    <div class="content ele2">2:7</div>
    <div class="content ele2">2:8</div>
    <div class="content ele2">2:9</div>
    <div class="content ele2">2:10</div>
    <div class="content ele2">2:11</div>
    <div class="content ele3">3:1</div>
    <div class="content ele3">3:2</div>
    <div class="content ele3">3:3</div>
    <div class="content ele3">3:4</div>
    <div class="content ele3">3:5</div>
    <div class="content ele3">3:6</div>
    <div class="content ele3">3:7</div>
    <div class="content ele3">3:8</div>
    <div class="content ele4">4:1</div>
    <div class="content ele4">4:2</div>
    <div class="content ele4">4:3</div>
  </div>
  <a href="javascript:;" class="load-more">Load more</a>
</div>

这篇关于根据过滤逻辑加载更多项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！