0

Есть следующий код:

$(document).on('click', '.test', function(){
  let i = $(this).data('id'); // получаем значение атрибута
  i++; // значение + 1
  $(this).text(i).attr('data-id', i); // записываем новое значение в атрибут
});
.test {
  display: flex;
  width: 50px;
  height: 50px;
  justify-content: center;
  align-items: center;
  background: #ccc;
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

<div class="test" data-id="0">0</div>

Не могу понять одного, почему считает только один раз и как это вылечить?

4
  • api.jquery.com/data/#data-html5
    – user256824
    Commented 4 окт. 2019 в 19:30
  • @РустамГимранов, т.е. атрибут data-id, придётся заменить на какой-нибудь любой не с data-*?
    – De.Minov
    Commented 4 окт. 2019 в 19:40
  • 1
    При первом обращении к методу data() jQuery считывает атрибуты data-* элемента и кэширует. И в дальнейшем использует этот кэш для работы. Вы же изменив один раз data-* атрибут в DOM не влияете на этот кэш. Вам нужно определиться: вы работаете или с методом attr('data-*') или с методом .data().
    – user256824
    Commented 4 окт. 2019 в 19:59
  • Возможный дубликат вопроса: Не срабатывает аттрибут data
    – user256824
    Commented 5 окт. 2019 в 14:26

1 ответ 1

2

JQuery не "следит" за изменениями атрибута, поэтому $(el).data(key) не изменятся после изменения атрибута

JQuery сохраняет внутри себя значение после первого вызова функции data, если необходимо изменить значение, то необходимо вызвать функцию data с параметром value, $(el).data(key, value), но при этом, в DOM'e не изменится атрибут (при необходимости его можно будет изменить с помощью $(el).attr(key, value))


Пример с $(el).data(key, value):

$(document).on('click', '.test', function(){
  let i = $(this).data('id'); // получаем значение атрибута
  i++; // значение + 1
  $(this).text(i).data('id', i); // записываем новое значение в атрибут
});
.test {
  display: flex;
  width: 50px;
  height: 50px;
  justify-content: center;
  align-items: center;
  background: #ccc;
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

<div class="test" data-id="0">0</div>


Вы можете работать с атрибутом, без JQ data

Пример без JQ data:

$(document).on('click', '.test[data-id]', function(){
  let i = $(this).attr('data-id'); // получаем значение атрибута
  i++; // значение + 1
  $(this).text(i).attr('data-id', i); // записываем новое значение в атрибут
});
.test {
  display: flex;
  width: 50px;
  height: 50px;
  justify-content: center;
  align-items: center;
  background: #ccc;
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

<div class="test" data-id="0">0</div>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.