Javascript 如何更改html元素中的索引

在我的代码中，每个类都将通过单击来切换

我想了解

数据

，

类索引

，在我的代码中，

类索引

已更改，类也将随之更改

但当我看开发工具时，

类索引

似乎没有改变

值1

值1

考虑到这一点，我添加了

undo

按钮，它与toggle相反，但效果不好

我怎样才能修好它

$（函数（）{
var classArray=['classA'，'classB'，'classC']；
var arrLen=classArray.length；
$（“#我们的日历td”）。单击（函数（）{
var classIndex=$（this）.data（'class-index'）；
$（this.removeClass（classArray[classIndex]）；
如果（分类指数<（arrLen-1））{
classIndex++；
}否则{
//重置类索引
classIndex=0；
}
$（this.addClass（classArray[classIndex]）；
$（此）.data（'class-index'，classIndex）；
});
$（“#撤消”）。在（'单击'，函数（）上{
var classIndex=$（this）.data（'class-index'）；
$（this.removeClass（classArray[classIndex]）；
分类指数--；
$（this.addClass（classArray[classIndex]）；
$（此）.data（'class-index'，classIndex）；
})
});
.classA{
背景色：浅绿色；
}
.B类{
背景颜色：黄色；
}
.C类{
背景色：红色；
}
运输署{
转换持续时间：0.4s；}

值1
撤消
对于未更新的DOM，这是预期的行为，因为
data（）
方法只更新jQuery的
数据的内部缓存
属性。它不会更新DOM中相关元素中保存的
数据
属性

关于您的问题，主要问题是因为您在
#undo
单击处理程序中使用了
this
。这将指向单击的按钮，而不是带有类的
td
。您只需要针对正确的元素

还请注意，
classIndex
逻辑可以通过使用模运算来简化。试试这个：


$（函数（）{
让classArray=['classA'，'classB'，'classC']；
设arrLen=classArray.length；
让$td=$（“我们的日历td”）；
$td.单击（函数（）{
设classIndex=$td.data（'class-index'）；
$td.removeClass（classArray[classIndex]）；
classIndex=++classIndex%classArray.length；
$td.addClass（classArray[classIndex]）；
$td.data（'class-index'，classIndex）；
});
$（“#撤消”）。在（'单击'，函数（）上{
设classIndex=$td.data（'class-index'）；
$td.removeClass（classArray[classIndex]）；
classIndex=（-classIndex+classArray.length）%classArray.length；
$td.addClass（classArray[classIndex]）；
$td.data（'class-index'，classIndex）；
});
});
.classA{背景色：浅绿色；}
.classB{背景色：黄色；}
.classC{背景色：红色；}
td{转换持续时间：0.4s；}

值1
撤消
这是因为您使用的是
data（）
方法。这会更新jQuery的所有
数据的内部缓存
属性，但不会更新DOM中元素的属性。请使用
attr（'data-class-index'）
获取并设置该属性的值。还请注意，您在
#undo
单击事件中使用了
This
。这将指向按钮，而不是带有类的
td
，感谢您使用好模运算符！我想知道如何更新
DOM
元素的另一个版本。有什么办法吗？没问题。如果要更新DOM中的数据属性，请使用
attr（）
，例如：
attr（'data-foo'，'bar'）