javascript - 显示更多/显示更少多个列表不起作用
问题描述
我一直在尝试创建显示更多和显示更少按钮的列表。我的代码适用于单个“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>
解决方案
更新您的代码以使用类、兄弟姐妹()、孩子()和下一个()
$(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>
推荐阅读
- jquery - jquery timepicker 将时间设置为 00:00:00
- python - 尝试安装 Pillow (python) 时出错
- scala - Spark-Snowflake 连接错误
- python - 我的为 Null 值返回 0 的序列化程序不起作用
- python - 带有 Python NetworkX 图的 Reingold Tilford 布局
- javascript - 我应该对可选但永不失败的事件使用承诺吗?
- java - 如何将 minDF 特征提取器 CountVectorizer 参数分别应用于每个标签,而不是应用于整个数据集
- python - Python:ValueError:无法使用长度与值不同的多索引选择索引器进行设置
- c - Realloc 返回 NULL 但为什么呢?
- spring - 具有不同服务中的变量的共同路径