Question

我正在尝试检查属性是否有值。如果它确实有值，我想改变css。

这就是我试过的......

if ($('.note').attr('data-user') !== ''){
     $(this).css('color','blue');
}

Answer 1

this不是您认为的那样。

尝试：

   $('.note').css('color', function(_, val){
       //val is the current color, if attribute has value return blue else return current one itself
       return !$(this).attr('data-user') ? val : 'blue';  
       //or
       //return !$(this).data('user') ? val : 'blue';  
   });

<强> Demo

Answer 2

两个问题：

$('.note').attr()只会返回第一个 .note元素的值。
$(this)未引用.note元素。

您可以使用.each来迭代所有.note元素

$('.note').each(function() {
    if ($(this).attr('data-user')) {
        $(this).css('color', 'blue');
    }
});

Answer 3

$('.note[data-user]').css('color', 'blue');

// or, if you want to exclude elements with `data-user=""`...
// though ideally, those wouldn't exist in the first place :P

$('.note[data-user]').not('[data-user=""]').css('color', 'blue');

如果你想让它一直适用于所有这些元素，那么在CSS中做得更好。

.note[data-user] { color: blue; }

.note[data-user]:not([data-user=""]) { color: blue; }

Answer 4

您还可以通过以下方式检查数据属性：

$('.note').data('user')

Answer 5

这是从我的经验中检查的最一致方式。

if (typeof $('.note').attr('data-user') !== 'undefined' && $.trim($('.note').attr('data-user')).length > 0){
     $(this).css('color','blue');
}

基本上，它首先检查属性是否存在，然后检查其中是否存在实际值。

如果属性存在，则更改css

5 个答案: