遍历无序列表以按顺序显示/隐藏项目 [英] Iterate through unordered list to show/hide items in order

问题描述

我试图基于click事件，遍历无序列表的元素以一次仅显示两个.我可以通过显示/隐藏元素来完成此操作，但这似乎将我限制为四个项目，而我有六个项目，并且还会添加更多.

I'm trying to loop through the elements of an unordered list to display only two at a time, based on a click event. I can accomplish this with showing/hiding the elements but that seems to limit me to four items and I have six and will be adding more.

我认为jQuery .each()函数应该可以遍历并切换display属性，但是我对从哪里开始感到困惑.任何帮助表示赞赏.谢谢.这就是我要遍历的内容.

I think the jQuery .each() function should work to loop through and toggle the display property but I'm stuck on where to start. Any help is appreciated. Thanks. Here's what I'm trying to loop through.

<div class="thumbBrowser">
          <ul>
            <li class="thumbLeft caseStudy tint tintWhite">
              <a href="client-page.html"><img src="images/argus_thumb.jpg"></a>
            </li>
            <li class="thumbRight caseStudy tint">
              <img src="images/adr_thumb.jpg">
            </li>
            <li class="hidden thumbLeft caseStudy tint tintWhite">
              <img src="images/dd_thumb.jpg">
            </li>
            <li class="hidden thumbRight caseStudy tint">
              <img src="images/cdp_thumb.jpg">
            </li>
             <li class="hidden thumbRight caseStudy tint tintWhite">
              <a href="client-page.html"><img src="images/pm_thumb.jpg"></a>
            </li>
            <li class="hidden thumbLeft caseStudy tint tintWhite">
              <img src="images/argus_thumb.jpg">
            </li>
          </ul>
          <div class="cycleButton" id="buttonClick"><img src="images/cycleIcon.png"></div>
    </div>

推荐答案

$('#buttonClick').on('click', function() {
  var showing = $(this).closest('.thumbBrowser').find('ul li:visible');
  var next = showing.last().next();
  if( next.length === 0 ) {
    next = $(this).closest('.thumbBrowser').find('ul li').first();
  }
  next.toggleClass('hidden').next().toggleClass('hidden');
  showing.toggleClass('hidden');
});

.hidden {
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="thumbBrowser">
          <ul>
            <li class="thumbLeft caseStudy tint tintWhite">
              <a href="client-page.html"><img src="images/argus_thumb.jpg" alt="one"></a>
            </li>
            <li class="thumbRight caseStudy tint">
              <img src="images/adr_thumb.jpg" alt="two">
            </li>
            <li class="hidden thumbLeft caseStudy tint tintWhite">
              <img src="images/dd_thumb.jpg" alt="three">
            </li>
            <li class="hidden thumbRight caseStudy tint">
              <img src="images/cdp_thumb.jpg" alt="four">
            </li>
             <li class="hidden thumbRight caseStudy tint tintWhite">
              <a href="client-page.html"><img src="images/pm_thumb.jpg" alt="five"></a>
            </li>
            <li class="hidden thumbLeft caseStudy tint tintWhite">
              <img src="images/argus_thumb.jpg" alt="six">
            </li>
          </ul>
          <div class="cycleButton" id="buttonClick"><img src="images/cycleIcon.png"></div>
    </div>

这篇关于遍历无序列表以按顺序显示/隐藏项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！