javascript - 使用 jQuery 删除(和添加)类到 HTML 元素，同时更新 DOM 树

Question

我正在尝试更改 div 的属性类。我定义了三个类，并希望在用户启动点击事件时循环访问这些类。第一个点击事件按预期工作，但第二个没有显示任何结果。

我已经经历了几次尝试让它工作的迭代，但没有取得任何成功。我认为发生的事情是 DOM 树没有用点击事件更新，所以当第二次点击事件被触发时，它会看到 card-green 类，添加 card-黄色类，然后退出分支逻辑。

$(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

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

片段

$(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>