CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Heisenberg
Heisenberg

Reputation: 5299

How to change index in html element

In my code, each class will be toggled by clicking them.

I would like to understand the data,class-index, in my code,class-index is changed and class will be changed aligned with this.

But when I look at developer tool, class-index dosen't seems to be changed.

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

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

Considering this, I add undo button,it works as a reverse of toggle,but it didn't work well.

How can I fix it?

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

Upvotes: 1

Views: 1679

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337580

With regard to the DOM not being updated, this is expected behaviour as the data() method only updates jQuery's internal cache of data attributes. It does not update the data attributes held in the relevant elements in the DOM.

With regard to your issue, the main problem is because you're using this within the #undo click handler. That will refer to the clicked button, not the td with the class on it. You just need to target the right element.

Also note that the classIndex logic can be simplified by using the modulo operator. Try this:

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

Upvotes: 2

Related Questions