Как изменить индекс в элементе html

Question

В моем коде каждый класс будет переключаться нажатием на них.

Я хотел бы понять, data, class-index, в моем коде class-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. Он не обновляет атрибуты data, содержащиеся в соответствующих элементах DOM.

Что касается вашей проблемы, то основная проблема заключается в том, что вы используете this в обработчике кликов #undo. Это относится к нажатой кнопке, а не к td с классом. Вам просто нужно выбрать нужный элемент.

Также обратите внимание, что classIndex logi c можно упростить с помощью оператора по модулю. Попробуйте это:

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