Данные jQuery (...) не хранятся в DOM?

Question

Если data-x находится в DOM, как это:

<div id="blah" data-x="143">Hello</div> 

и я могу изменить его с

$('#blah').data('x', 13687) 

то, кажется, что data-x не изменяется в DOM (Осмотреть особенность использования браузера на сниппета код ниже):

Это нормальное поведение?

---

Пример:

console.log($('#blah').data('x')); 
 
$('#blah').data('x', 13687) 
 
console.log($('#blah').data('x'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<div id="blah" data-x="143">Hello</div>

Answer 1

data() метод JQuery в не набор атрибутов данных, он сохраняет данные во внутреннем объекте.
Атрибуты данных HTML5 будут автоматически привязаны к объекту данных jQuery, что означает, что начальное значение объекта данных отражает все, что указано в атрибуте, но изменение значения с помощью data()не будет обновить атрибут, только внутренние данные объект, который использует jQuery.

Так что да, это нормально, что атрибут не меняется, и он должен быть таким.

Если по какой-то причине вы должны изменить фактический атрибут, вы можете использовать attr()

$('#blah').attr('data-x', 13687) 

Обратите внимание, что это, как правило, не требуется, если вы постоянно используете data() в вашем коде, и вы не используете другие скрипты, которые полагаются на атрибут data.

Вы найдете больше о том, как атрибуты обрабатываются, и как JQuery хранит данные в docs

Answer 2

console.log($('#blah').attr('data-x')); 
$('#blah').attr('data-x', 13687); 
console.log($('#blah').attr('data-x')); 

Используйте функцию attr() для обработки атрибутов и их данные.

ОБНОВЛЕНИЕ: Я пишу небольшой плагин для вас!

$.fn.dataRead=function(a,b){ 
    this.attr("data-"+a,b); 
}; 

Теперь работа, как вам нужно: пример:

console.log($('#blah').dataRead('x')); 
    $('#blah').dataRead('x', 13687); 
    console.log($('#blah').dataRead('x')); 

Answer 3

вы должны использовать $('#blah').attr('data-x', 13687) не $('#blah').data('x', 13687), потому что data() не метод, чтобы получить атрибут данных-х, чтобы установить у вас есть использовать attr() для установки значения.