javascript - 每次单击后，jQuery 仅在下一个列表项之前添加，而不是一次添加所有列表项

Question

简单地说，我的目标是让“下一个”按钮为上一个列表项添加一个事件类，然后如果事件类存在，也为该列表项添加一个 YES，而不是当前的所有列表项在我的代码中做。

目前，我的尝试是将 YES 添加到所有列表项，我只想在每次点击后将 YES 添加到之前的元素。

我的尝试在这里:

var $tabs = $('li');    

$('.next').on('click', function () {
    $tabs.next('li').addClass("active").css("background-color","yellow");

  if ($($tabs).next().hasClass("active")){
      $($tabs).prepend('YES').prev();
    } else {
        $($tabs).append('NO');
    }

});

代码可以在这里看到:

http://codepen.io/anon/pen/yrjvb

Answer 1

我不确定我是否理解正确，但这可能是您要找的:

var $tabs = $('li');
var count = 0;

$('.next').click(function () {
  var tab = $tabs.eq(count);   
  var link = tab.find('a[data-toggle="tab"]');
  link.addClass("active").css("background-color","yellow");

  if (link.hasClass("active")) {
    tab.prepend('YES');
    count++;
  } else {
    tab.append('NO');
  }
});

fork 代码笔:http://codepen.io/anon/pen/pnKAc?editors=101

基本上，您选择了所有 <li>元素。在我的代码中，我一个一个地选择一个元素。

当然有更好的方法(直接选择下一个元素等)，但我想通过这段代码你可以看到有什么不同。

另外，你说你要添加，你的意思是“追加”吗？