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

Question

我有一个包含 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;
}

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

有什么建议吗？

Answer 1

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

$("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>