Я пытался обновить атрибут 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>
3
Heisenberg 22 Апр 2020 в 15:27

2 ответа

Лучший ответ

Элемент 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>
3
gaetanoM 22 Апр 2020 в 12:53
$("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>
1
Nicolae Maties 22 Апр 2020 в 12:33