Question

简单地说，我的目标是制作＆＃34; next＆＃34;按钮将一个活动类添加到上一个列表项，然后如果活动类存在，也在该列表项之前添加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');
  }
});

Forked Codepen：http://codepen.io/anon/pen/pnKAc?editors=101

基本上，您选择了所有<li>项。在我的代码中，我逐个选择一个项目。

当然有一种更好的方法（直接选择下一个元素等，但我想通过这段代码你可以看到它们的不同之处。

另外，你说要添加，你的意思是＆＃34;追加＆＃34;，那么？

Answer 2

这种方法怎么样（codepen）：存储当前的方法，清除其活动状态，选择下一个方法？

$('.next').on('click', function () {
  var $current = $('li.active');
  if(!$current.length){
    $current = $('li:first');
    $current.addClass('active');
  }else{
    $current.removeClass('active');
    $current.next('li').addClass('active');
  }   
 });

每次单击后，jQuery仅预置到下一个列表项，而不是一次列出所有列表项

2 个答案: