如何更改html元素中的索引

Question

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

我想了解我的代码中的 ,data已更改，并且类将与此保持一致。class-indexclass-index

但是当我查看开发人员工具时，class-index似乎没有改变。

<td class="classC" data-class-index="0">Value 1</td>

<td class="classB" data-class-index="0">Value 1</td>

考虑到这一点，我添加undo了按钮，它与切换相反，但效果不佳。

我该如何解决？

$(function(){

 var classArray = ['classA','classB','classC'];

 var arrLen = classArray.length;

 $("#our_calendar td").click(function() {  

       var classIndex = $(this).data('class-index');

       $(this).removeClass(classArray[classIndex]);

       if(classIndex < (arrLen-1)) {

         classIndex++;

       }  else {

         //reset class index

         classIndex = 0;

       }

       $(this).addClass(classArray[classIndex]);

       $(this).data('class-index',classIndex);

 });

 

   $("#undo").on('click',function() {

       var classIndex = $(this).data('class-index');

       $(this).removeClass(classArray[classIndex]);

         classIndex--;

     

       $(this).addClass(classArray[classIndex]);

       $(this).data('class-index',classIndex);

  })

});

.classA {

    background-color: aqua;

}

.classB {

    background-color: yellow;

}

.classC {

    background-color: red;

}

td {

transition-duration:0.4s ;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="our_calendar">

 <tr><td class="classA" data-class-index="0">Value 1</td></tr>

</table>

<button id="undo">undo</button>

Answer 1

关于未更新的 DOM，这是预期的行为，因为该data()方法仅更新 jQuery 的内部data属性缓存。它不会更新dataDOM 中相关元素中的属性。关于您的问题，主要问题是因为您在this点击#undo处理程序中使用。那将指的是单击的按钮，而不是td上面的类。您只需要定位正确的元素。另请注意，classIndex可以使用模运算符简化逻辑。试试这个：$(function() {&nbsp; let classArray = ['classA', 'classB', 'classC'];&nbsp; let arrLen = classArray.length;&nbsp; let $td = $("#our_calendar td");&nbsp; $td.click(function() {&nbsp; &nbsp; let classIndex = $td.data('class-index');&nbsp; &nbsp; $td.removeClass(classArray[classIndex]);&nbsp; &nbsp; classIndex = ++classIndex % classArray.length;&nbsp; &nbsp; $td.addClass(classArray[classIndex]);&nbsp; &nbsp; $td.data('class-index', classIndex);&nbsp; });&nbsp; $("#undo").on('click', function() {&nbsp; &nbsp; let classIndex = $td.data('class-index');&nbsp; &nbsp; $td.removeClass(classArray[classIndex]);&nbsp; &nbsp; classIndex = (--classIndex + classArray.length) % classArray.length;&nbsp; &nbsp; $td.addClass(classArray[classIndex]);&nbsp; &nbsp; $td.data('class-index', classIndex);&nbsp; });});.classA { background-color: aqua; }.classB { background-color: yellow; }.classC { background-color: red; }td { transition-duration: 0.4s; }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><table id="our_calendar">&nbsp; <tr>&nbsp; &nbsp; <td class="classA" data-class-index="0">Value 1</td>&nbsp; </tr></table><button id="undo">undo</button>