javascript - 循环显示下一项

Question

我有一个包含订单列表和下方按钮的 div。现在我想要发生的是，当单击按钮时，您将一个类添加到第一个 li，当再次单击按钮时，它会跳到第二个 li，依此类推，直到它到达最后一个 li，然后停止。这是我的代码。

目前我正在使用 console.log 只是看看会发生什么，但每次我点击它都会显示所有列表项。

<style>
  .hl { background: green; }
</style>

<div class="large-2 large-centered columns">
    <ol>
     <li>some</li> 
     <li>some</li> 
     <li>some</li> 
     <li>some</li> 
     <li>some</li> 
     <li>some</li> 
     <li>some</li> 
    </ol>
    <button>Click Me</button>
</div>

<script>
  $(document).ready(function(){
    var item = $('ol').find('li');
    var btn = $('button');

    btn.click(function(e){
      e.preventDefault();
      for (var i = 0; i < item.length; i++) {
         console.log([i]);
      };
    });
  });
</script>

Answer 1

尝试像这样循环你的项目:

$(document).ready(function () {

    var item = $('ol').find('li');
    var btn = $('button'),
        i = 0;

    btn.click(function(e) {
        e.preventDefault();
        item.removeClass('hl').eq(i++ % item.length).addClass('hl');
    });
});

演示:http://jsfiddle.net/yV9CM/