Javascript 在更新DOM树时，使用jQuery将类删除（并添加）到HTML元素中

我正在尝试更改

div

的属性类。我有三个已定义的类，希望在用户启动单击事件时遍历这些类。第一次单击事件按预期工作，但第二次没有显示任何结果

我已经经历了几次迭代，试图让它工作，但没有任何成功。我认为发生的事情是DOM树没有被click事件更新，所以当第二个click事件被触发时，它会看到

卡绿色

类，添加

卡黄色

类，然后退出分支逻辑

$(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]);
    }
  })
});

---

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

演示片段：

$（文档）.ready（函数（）{
var cardColors=['card-green'、'card-yellow'、'card-red']
变量i=0
$（'body'）。在（'click'，function（）上{
$（本）
.removeClass（CardColor[i]）
.addClass（CardColor[i=（i+1）%CardColor.length]）
})
})

正文{
宽度：100vw；
高度：100vh；
保证金：0；
填充：0；
}
.card绿色{背景颜色：绿色；}
.card黄色{背景色：黄色；}
.card red{背景色：红色；}

---

当单击文档

正文
中的元素时，此操作会按
卡
数组的顺序更改颜色：

（与@gyre的答案非常相似，只包括代码逻辑中的
事件.target
，而不仅仅是
正文
）


var cards=['card-green'、'card-yellow'、'card-red'；
$（'body'）。在（'click'，function（）上{
var elem=event.target，
curClass=$（elem.attr（'class'），
i=cards.indexOf（$（elem.attr（'class'））；
$（要素）
.removeClass（curClass）
.addClass（卡片[i=（i+1）%cards.length]）；
});
div{
高度：100px；
宽度：100px；
显示：内联块；
}
.绿卡{
背景颜色：绿色；
}
.黄牌{
背景颜色：黄色；
}
.红牌{
背景色：红色；
}

使用和。详细信息在代码段中注释。如果使用的选项数量有限，则不需要阵列。当使用
$（this）
时，您不需要跟踪所单击的内容（很像，它与事件无关，而与函数的所有者有关。）

片段


$（文档）.ready（函数（）{
$（文档）。在（'click'，'div'，函数（事件）{
/*确定$（此）类
||通过开关使课堂通过
*/
var color=$（this.attr（'class'）；
/*开关的每个部分都是if/else
||条件。如果条件不是
||遇到了，它就会踢你
||下一个条件和
||依此类推，直到您达到默认值或
||满足一个条件，在这种情况下
||休息会把你踢出开关。
||每个条件都有一个toggleClass（）
||方法根据颜色进行切换
||到目前的div类
*/
开关（彩色）{
“绿色”案例：
$（this.toggleClass（'green-yellow'）；
打破
“黄色”案例：
$（this.toggleClass（'yellow-red'）；
打破
案例“红色”：
$（this.toggleClass（'red-green'）；
打破
违约：
打破
}
});
});
div{
高度：30px；
宽度：50px；
边框：1px纯黑；
光标：指针；
}
格林先生{
背景：绿色
}
瑞德先生{
背景：红色；
}
黄先生{
背景：黄色
}
相同的代码是可行的，只需从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]);
    }
  })
});

首先点击它的黄色，第二次点击红色，第三次点击绿色。你想要的是正确的吗？是的。HTML将以
绿色卡片作为默认类加载。第一次单击会将其更改为黄色，第二次单击会将其更改为红色，第三次单击会将其更改为绿色，这样就可以从头开始。代码u编写的是正确的！只要检查下面修改的代码就可以了。但它改变了将类追加到body元素的方式，就像现在编写的那样。您希望在哪个元素上更改类？它几乎可以工作。唯一需要更改的是
else if
语句中的条件。不是
$（this.attr（'class'）=='card yellow'
，而是
$（event.target.nodeName）.attr（'class'）=='card yellow
。