代码之家 › 专栏 › 技术社区 › P. Nick

单击元素时,如何显示下一个3、6、9等子元素?

jquery javascript

P. Nick · 技术社区 · 6 年前

我有9个项目,一次只显示3个。当我点击Next按钮时,它会显示接下来的三个项目(4,5,6),当我再次点击它时,它会显示接下来的三个项目(7,8,9),以此类推。当它到达末尾并再次单击“下一步”按钮时,它应该再次显示前3个元素(1,2,3),并从那里开始。

如何实现这一目标?

$(document).on("click", ".next", function() {
  $(this).parent().find("ul").children().slice(0, 6).animate({
    width: 'toggle'
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
  <div class="next">Next</div>

  <ul>
    <li>Hello 1</li>
    <li>Hello 2</li>
    <li>Hello 3</li>
    <li>Hello 4</li>
    <li>Hello 5</li>
    <li>Hello 6</li>
  </ul>
</div>
<button type="button" class="next">Next</button>