问题描述
我一直在尝试创建显示更多和显示更少按钮的列表。我的代码适用于单个“ul”列表。但是当我创建多个列表时,列表项没有显示。仅显示按钮。
你能告诉我如何使用显示更多/显示更少按钮为多个“ul”列表编写脚本。
此外,我必须对所有列表和按钮使用相同的 id 和 class
提前致谢..
//html
<div class="wrapper">
<ul class="list">
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
</ul>
<button id="next">+ Show More</button>
<button id="less">- Show Less</button>
</div>
<div class="wrapper">
<ul class="list">
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
</ul>
<button id="next">+ Show More</button>
<button id="less">- Show Less</button>
</div>
<div class="wrapper">
<ul class="list">
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
</ul>
<button id="next">+ Show More</button>
<button id="less">- Show Less</button>
</div>
//more list...
//Script
$(document).ready(function(){
var list = $(".list li");
var numToShow = 3;
var button = $("#next");
var link = $('#less');
var numInList = list.length;
list.hide();
if (numInList > numToShow) {
button.show();
link.hide();
}
list.slice(0,numToShow).show();
button.click(function(){
var showing = list.filter(':visible').length;
list.slice(showing - 1,showing + numToShow).fadeIn();
var NowShowing = list.filter(':visible').length;
if (NowShowing >= numInList) {
button.hide();
link.show();
}
});
link.click(function () {
$('.list li').not(':lt(3)').hide();
button.show();
link.hide();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
解决方法
更新您的代码以使用类、siblings()、children() 和 next()
$(document).ready(function(){
var numToShow = 3;
$(".list li").hide();
$('.wrapper ul').each(function(){
var list = $(this).children("li");
var button = $(this).siblings(".next");
var less = $(this).siblings('.less');
var numInList = list.length;
if (numInList > numToShow) {
button.show();
less.hide();
}
//$(this).children("li:lt('+ numToShow +')").show();
list.slice(0,numToShow).show();
});
$('button.next').click(function(){
var list = $(this).siblings(".list").children("li");
var numInList = list.length;
var showing = list.filter(':visible').length;
list.slice(showing - 1,showing + numToShow).fadeIn();
var nowShowing = list.filter(':visible').length;
if (nowShowing >= numInList) {
$(this).hide();
$(this).next('button.less').show();
}
});
$('button.less').click(function () {
$(this).siblings(".list").children("li").not(':lt(3)').hide();
$(this).siblings('button.next').show();
$(this).hide();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<ul class="list">
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
</ul>
<button id="next" class="next">+ Show More</button>
<button id="less" class="less">- Show Less</button>
</div>
<div class="wrapper">
<ul class="list">
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
</ul>
<button id="next" class="next">+ Show More</button>
<button id="less" class="less">- Show Less</button>
</div>
<div class="wrapper">
<ul class="list">
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
</ul>
<button id="next" class="next">+ Show More</button>
<button id="less" class="less">- Show Less</button>
</div>