在更新DOM树的同时，使用jQuery删除（和添加）类到HTML元素

Question

我正在尝试更改div的属性类。 我有三个已定义的类，并且想在用户启动click事件时循环浏览这些类。 第一次单击事件按预期方式工作，但第二个未显示任何结果。

我经历了几次尝试使它起作用的迭代，但是并没有取得任何成功。 我认为这是因为没有使用click事件更新DOM树，因此，在触发第二个click事件时，它会看到card-green的card-green类，添加card-yellow的card-yellow类，然后退出分支逻辑。

$(document).ready(function() {
  $('body').on('click', function(event) {
    var cardColors = ['card-green', 'card-yellow', 'card-red'];
    if ($(event.target.nodeName).attr('class') == 'card-green') {
      $(event.target.nodeName).removeClass(event.target.nodeName.className).addClass(cardColors[1]);
    } else if ($(this).attr('class') == 'card-yellow') {
      $(event.target.nodeName).removeClass(event.target.nodeName.className).addClass(cardColors[2]);
    } else {
      $(event.target.nodeName).removeClass(event.target.nodeName.className).addClass(cardColors[0]);
    }
  })
});

Answer 1

单击文档body中的元素时，这cards数组的顺序更改颜色：

（与@gyre的答案非常相似，仅在代码逻辑中包括event.target ，而不仅仅是body ）。

 var cards = ['card-green', 'card-yellow', 'card-red']; $('body').on('click', function() { var elem = event.target, curClass = $(elem).attr('class'), i = cards.indexOf($(elem).attr('class')); $(elem) .removeClass(curClass) .addClass(cards[i = (i + 1) % cards.length]); }); 

 div { height: 100px; width: 100px; display: inline-block; } .card-green { background-color: green; } .card-yellow { background-color: yellow; } .card-red { background-color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="foo" class="card-green"></div> <div id="bar" class="card-yellow"></div> <div id="baz" class="card-red"></div> 

Answer 2

使用switch和toggleClass() 。 在代码段中评论了详细信息。 如果使用的选项数量有限，则不需要数组。 使用$(this)您无需跟踪单击的内容（类似于event.target但$(this)并不关心事件，因为它与函数的所有者有关。）

SNIPPET

 $(document).ready(function() { $(document).on('click', 'div', function(event) { /* Determine $(this) class || Pass class through the switch */ var color = $(this).attr('class'); /* Each part of the switch is a if/else || conditional. If the condition isn't || met, then it will kick you || down to the next conditional and || so on, until you reach default or || meet a condition in which case the || break will kick you out of switch. || Each condition has a toggleClass() || method to switch colors according || to the present class of div */ switch (color) { case 'green': $(this).toggleClass('green yellow'); break; case 'yellow': $(this).toggleClass('yellow red'); break; case 'red': $(this).toggleClass('red green'); break; default: break; } }); }); 

 div { height: 30px; width: 50px; border: 1px solid black; cursor: pointer; } .green { background: green } .red { background: red; } .yellow { background: yellow } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='green'></div> <div class='green'></div> <div class='green'></div> <div class='green'></div> <div class='green'></div> <div class='green'></div> <div class='green'></div> <div class='green'></div> <div class='green'></div> <div class='green'></div> <div class='green'></div> <div class='green'></div> <div class='green'></div> <div class='green'></div> <div class='green'></div> <div class='green'></div> <div class='green'></div> <div class='green'></div> <div class='green'></div> <div class='green'></div> <div class='green'></div> 

Answer 3

使用其他索引变量来跟踪数组中的位置：

演示片段：

 $(document).ready(function() { var cardColors = ['card-green', 'card-yellow', 'card-red'] var i = 0 $('body').on('click', function() { $(this) .removeClass(cardColors[i]) .addClass(cardColors[i = (i + 1) % cardColors.length]) }) }) 

 body { width: 100vw; height: 100vh; margin: 0; padding: 0; } .card-green { background-color: green; } .card-yellow { background-color: yellow; } .card-red { background-color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 4

只需从removeClass（event.target.nodeName.className）中删除nodeName即可使用相同的代码，而不是使用removeClass（event.target.className）。 试试这个，它为我工作。

$(document).ready(function() {
  $('body').on('click', function(event) {
    var cardColors = ['card-green', 'card-yellow', 'card-red'];
    alert(event.target.className)
    if ($(event.target.nodeName).attr('class') == 'card-green') {
      $(event.target.nodeName).removeClass(event.target.className).addClass(cardColors[1]);
    } else if ($(this).attr('class') == 'card-yellow') {
      $(event.target.nodeName).removeClass(event.target.className).addClass(cardColors[2]);
    } else {
      $(event.target.nodeName).removeClass(event.target.className).addClass(cardColors[0]);
    }
  })
});