根據過濾邏輯加載更多項目

Question

邏輯在這里..

1. 在load div容器上必須顯示基於li選擇的ID。 Li ID和div ID必須匹配並顯示。 其他人將被隱藏。

2. 初始加載時，它僅需顯示3個項目（基於ID的過濾后）。 點擊“更多”鏈接時，每次點擊必須顯示另外6個。 基於ID的過濾器必須維護。

在此先感謝您的幫助！

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();
    });    
 }
});

Answer 1

您可以使用簡單的過濾器，例如

 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>