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>
data-id
, придётся заменить на какой-нибудь любой не сdata-*
?data()
jQuery считывает атрибутыdata-*
элемента и кэширует. И в дальнейшем использует этот кэш для работы. Вы же изменив один разdata-*
атрибут в DOM не влияете на этот кэш. Вам нужно определиться: вы работаете или с методомattr('data-*')
или с методом.data()
.