Как увеличить индекс данных в javascript

Question

Я пытался обновить атрибут data, как моя работа ниже.

Когда я нажимаю квадрат, атрибут data должен быть incremented.

Но результат немного другой. Кажется, не увеличивается.

Как я могу их исправить?

И почему эта проблема возникла?

Спасибо

$("td").click(function() {
  index=$(this).data('layer');
  index+=1
  $(this).attr('data-layer',index);
  console.log(this);
});

td {
border:solid black 1px;
width:50px;
height:50px;
cursor:pointer;}

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

<table>
  <tr>
    <td data-layer="0"></td>
  </tr>
</table>

Answer 1

Элемент Html может иметь набор данных и / или атрибут .

. В вашем коде вы получаете значение набора данных и меняете, как если бы это атрибут. Это ваша ошибка.

Подробнее см. .data () и .attr () .

. нужно использовать:

$("td").click(function() {
    index=$(this).attr('data-layer');
    index = index + 1;
    $(this).attr('data-layer',index);
    console.log(this);
});

Вместо этого, если вам нужно использовать набор данных:

$("td").click(function() {
    index=$(this).data('layer');
    index = index + 1;
    $(this).data('layer',index);
    console.log($(this).data('layer'));
});

td {
      border:solid black 1px;
      width:50px;
      height:50px;
      cursor:pointer;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
    <tr>
        <td data-layer="0"></td>
    </tr>
</table>

Answer 2

$("td").click(function() {
  const index = $(this).attr('data-layer');
  const newIndex = Number(index) + 1;
  $(this).attr('data-layer', newIndex);
  console.log(this);
});

td {
border:solid black 1px;
width:50px;
height:50px;
cursor:pointer;}

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

<table>
  <tr>
    <td data-layer="0"></td>
  </tr>
</table>