gpt4 book ai didi

javascript - 仅显示列表的一部分并切换部分

转载 作者:行者123 更新时间:2023-11-28 06:35:24 25 4
gpt4 key购买 nike

我有一个包含 16 种产品的列表,但我想一次只显示 8 种,并使用一个按钮来切换 View 。

我有这个 fiddle 给你看.. https://jsfiddle.net/5cLvq6bm/2/
如果在CSS中我有这个,一切正常:

ul#carter li:nth-of-type(1n+9) {
display: none;
}

但是如果我添加 !important 就会停止工作:

ul#carter li:nth-of-type(1n+9) {
display: none!important;
}

如果我不使用!importantdisplay:none不会影响我的列表...

有什么建议吗?

最佳答案

我不明白你为什么要把事情复杂化。嗯,这是一个简单的解决方案:

$("li.product:gt(8)").hide();
$(".button").click(function() {
if ($("li.product").not(":visible").length > 0) {
$("li.product").toggle("slow");
}
});
ul {
display: inline;
}

li {
display: inline;
}

.button {
background-color: #ed241a;
color: #fff;
font-family: open sans;
font-size: 10px;
font-weight: bold;
padding: 14px;
position: absolute;
text-transform: uppercase;
}
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<ul id="carter" class="products">
<li class='product'><img src="http://placehold.it/100x100"></li>
<li class='product'><img src="http://placehold.it/100x100"></li>
<li class='product'><img src="http://placehold.it/100x100"></li>
<li class='product'><img src="http://placehold.it/100x100"></li>
<li class='product'><img src="http://placehold.it/100x100"></li>
<li class='product'><img src="http://placehold.it/100x100"></li>
<li class='product'><img src="http://placehold.it/100x100"></li>
<li class='product'><img src="http://placehold.it/100x100"></li>
<li class='product'><img src="http://placehold.it/100x100"></li>
<li class='product'><img src="http://placehold.it/100x100"></li>
<li class='product'><img src="http://placehold.it/100x100"></li>
<li class='product'><img src="http://placehold.it/100x100"></li>
<li class='product'><img src="http://placehold.it/100x100"></li>
<li class='product'><img src="http://placehold.it/100x100"></li>
<li class='product'><img src="http://placehold.it/100x100"></li>
<li class='product'><img src="http://placehold.it/100x100"></li>
</ul>
<br>
<a href="#" class="button">Switch View</a>

关于javascript - 仅显示列表的一部分并切换部分,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34338293/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com