$(document).ready( function () {

  $("#bla").on( "click", function () {
  
        alert( $(this).data('bla') );
  	    $(this).attr('data-bla', "2");  
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="bla" data-bla="1">
  button
</div>

Итак, мне нужно изменить значение data-bla с «1» на «2», но, как вы видите, значение не обновляется, и каждый щелчок по кнопке предупреждает значение по умолчанию «1».

Что я сделал не так?

4
Oto Shavadze 9 Янв 2017 в 19:06

3 ответа

Лучший ответ

data() не является функцией доступа для атрибутов data-*. Это средство доступа к кэшу данных jQuery для элемента, который только инициализируется из атрибутов data-*.

Если вы хотите прочитать значение атрибута data-bla, используйте attr("data-bla"), а не data("bla"). Если вы хотите установить элемент данных bla, используйте data("bla", newValue), а не attr("data-bla", newValue).

Например, используйте attr() для получения и установки, или используйте data() для получения и установки, но не смешивайте их, потому что они управляют разными вещами.

Используя attr():

$(document).ready( function () {

  $("#bla").on( "click", function () {
  
        alert( $(this).attr('data-bla') );
  	    $(this).attr('data-bla', "2");  
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="bla" data-bla="1">
  button
</div>

Используя data():

$(document).ready( function () {

  $("#bla").on( "click", function () {
  
        alert( $(this).data('bla') );
  	    $(this).data('bla', "2");  
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="bla" data-bla="1">
  button
</div>
7
T.J. Crowder 9 Янв 2017 в 16:08

Если вы проверяете на наличие .data ('bla'), вы должны также изменить это ;-)

$(document).ready( function () {

  $("#bla").on( "click", function () {
  
        alert( $(this).data('bla') );
  	    $(this).data('bla', "2");  
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="bla" data-bla="1">
  button
</div>
2
DarkLegend 9 Янв 2017 в 16:09

Метод attr() просто обновляет атрибут, видимый в элементе. Для правильного хранения данных вам нужно использовать data() метод со вторым аргументом в виде Значение.

$(document).ready(function() {
  $("#bla").on("click", function() {
    alert($(this).data('bla'));
    $(this).data('bla', "2");
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="bla" data-bla="1">
  button
</div>

См. данные jQuery против Attr?

4
Community 23 Май 2017 в 12:33