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

如果你想要我在评论中说的话，那么这是正确的方法：

$(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(){ });：

{{1}}

Answer 3

我相信这就是我们所需要的。

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

或可能是

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

只是因为你提到要添加数据属性

jquery：将css规则应用于添加到元素的数据属性？

3 个答案: