如何更改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() {

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

  let arrLen = classArray.length;

  let $td = $("#our_calendar td");

  $td.click(function() {

    let classIndex = $td.data('class-index');

    $td.removeClass(classArray[classIndex]);

    classIndex = ++classIndex % classArray.length;

    $td.addClass(classArray[classIndex]);

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

  });

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

    let 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 { 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>