javascript - 如何使用 Jquery 或 Javascript 按顺序单击每个按钮来选择每个

Question

<ul>
  <li>New York</li>
  <li>Los Angeles</li>
  <li>Chicago</li>
</ul>

我首先设置点击功能来选择列表项。唯一的问题是它会选择每一个。我可以使用 eq() 方法，但这不允许我在每次单击按钮时都选择下一个列表项。我尝试了 next() 方法，它确实选择了下一个项目，但我的问题是，“如何在单击按钮时选择第一个列表项，然后下一次点击后的下一个列表项，依此类推。

$('button').click(function(){
  $('ul li').css("color", "red");
});

Answer 1

添加选定的类是最简单的，然后您可以遍历 next() 或 first()，具体取决于当前选定的类是否在组中

$('button').click(function() {
  var $items = $('li'),
    $selected = $items.filter('.selected').removeClass('selected'),
    $next;
  // first time only when no selected exists, remove if you automatically select first one
  if (!$selected.length) {
    $next = $items.first();
  } else {
    $next = $selected.is($items.last()) ? $items.first() : $selected.next();
  }

  $next.addClass('selected')
});

.selected {
  color: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>New York</li>
  <li>Los Angeles</li>
  <li>Chicago</li>
</ul>
<button>Toggle selections</button>