Браузеры не видят изменений в data- *, свойства селектора атрибутов CSS не отображаются

Question

Учитывая этот CSS:

[data-myplugin-object="blue-window"]{
    background-color: #00f;
}

[data-myplugin-object="red-window"]{
    background-color: #f00;
}

И этот jQuery:

$('[data-myplugin-object="blue-window"]').each(function(event){
    $(this).data({
        'myplugin-object': 'red-window'
    });
});

И этот фрагмент HTML:

<div data-myplugin-object="blue-window">
    <p>Hello world</p>
</div>

Теперь можно ожидать, что когдавыполняется фрагмент jQuery ( должным образом откладывается до тех пор, пока загрузка страницы не будет завершена, конечно, ) мое синее окно (, которое изначально отображается как синий ) станет красным.

Нетэто, конечно, нет;и используя Firebug и Developer Tools в Firefox и Chrome соответственно, я не вижу никаких изменений в атрибутах data-*.

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

Answer 1

jQuery.data() атрибуты фактически не хранятся в объекте DOM в jQuery. Объект DOM помечен уникальным идентификатором jQuery, а фактические данные хранятся в отдельной структуре данных javascript. Среди прочих причин jQuery делает это таким образом, чтобы предотвратить ошибки утечки памяти с циклическими ссылками, которые могут возникать в некоторых браузерах, когда значения данных являются ссылками на другие объекты DOM.

Если вы хотите изменить фактический атрибут DOM, я бы посоветовал установить атрибут непосредственно себе так:

obj.attr("data-myplugin-object", "red-window");

Хотя для того, что вы делаете, я думаю, что большинство людей будет использовать добавление / удаление / изменение имен классов CSS, а не пользовательских атрибутов, поскольку это обычный способ изменения правил CSS, применяемых к объекту.

<div id="myObj" class="blueWindow">
    <p>Hello world</p>
</div>

.blueWindow {background-color: #00F;}
.redWindow  {background-color: #F00;}

 $("#myObj").removeClass("blueWindow").addClass("redWindow");

Или, если на объекте нет других классов:

 $("#myObj").attr("class", "redWindow");