jquery: применить правило css к атрибуту данных, добавленному к элементу?

Question

Без использования класса, как я могу применить простое правило CSS для атрибута данных, который динамически добавляется? Вот мое текущее решение с классами, я хочу заменить это добавлением данных и применить правило css к элементам с атрибутом атрибута 'highlight'. Это возможно? Причина, по которой я это делаю, заключается в том, чтобы избежать беспорядка с базовыми данными DOM.

$(document).on('mouseover',function (e) { 
    e.stopPropagation(); 
    $(e.target).addClass('highlight'); 

}).on('mouseout', function (e) { 
     e.stopPropagation(); 
     $(e.target).removeClass('highlight'); 
}); 

Answer 1

JQuery

$(document).on('mouseover',function (e) { 
    e.stopPropagation(); 
    $(e.target).attr('data-highlight', 'init'); 

}).on('mouseout', function (e) { 
    e.stopPropagation(); 
    $(e.target).removeAttr('data-highlight'); 
}); 

CSS

[data-highlight] { 
    background: yellow; 
} 

jsFiddle Demo.

Answer 2

Я считаю, что это то, что необходимо.

$(e.target).addClass('highlight').css('display', 'block');

или может быть

$(e.target).data('class','highlight').css('display', 'block');

только потому, что вы упомянули добавить атрибут данных

Answer 3

, если вы хотите, что я сказал в комментариях, то это правильный подход:

$(document).on('mouseover',function (e) { 
    e.stopPropagation(); 
    $(e.target).data('highlight',true).css('background-color','#F00'); //the background is an example 

}).on('mouseout', function (e) { 
     e.stopPropagation(); 
     $(e.target).data('highlight',false).css('background-color','#CCC'); 
}); 

Хотя, если вы хотите выбрать элемент с помощью атрибута данных, то вы можете хотите взглянуть на это. Приведенный ниже код получает все <a> с данными атрибутов highlight набор в true:

$(document).on('mouseover',$('a').filter(function(){return $(this).data('highlight');}), function(){ 

}).on('mouseout', $('a').filter(function(){return $(this).data('highlight');}), function(){ 

});