逻辑在这里..
在加载div容器上必须根据li选择的id显示。 Li ID& div ID必须匹配并显示。其他人将被隐藏。
在初始加载时,它必须只显示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();
});
}
});
答案 0 :(得分:0)
您可以使用像
这样的简单过滤器
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();
});
});
&#13;
<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>
&#13;