Question

在我的HTML中，我有：

<div class="myClass" data-status="true"></div>
<div class="myClass" data-status="false"></div>

我想根据状态向div添加一个CSS类：

$('.myClass').each(function()
{ 
    // compare status
    if($(this).data('status') == 'true')
    {
        $(this).addClass('myTrueClass');
    }
    else
    {
        $(this).addClass('myFalseClass');
    }
});

问题是，总是添加myFalseClass。我的问题是：如何解决问题，为什么会出现问题？

Answer 1

尝试，

$('.myClass').each(function()
{ 
    if($(this).data('status'))
    {
        $(this).addClass('myTrueClass');
    }
    else
    {
        $(this).addClass('myFalseClass');
    }
});

由于.data(key)会自动将“true”转换为布尔值。

DEMO

当然，如果你想把这个“真”作为一个字符串，那么只需使用.attr("data-status")

Answer 2

.data() method将对[data-*]属性执行一些自动转换，这样可以非常方便地将数据传递到客户端。

当您存储将自动转换为布尔值的内容时，您可以使用：

if ($(this).data('status')) {
    ...
} else {
    ...
}

如果您需要确保该值为true，而不仅仅是真值（如值1），那么请务必使用参考比较：

if ($(this).data('status') === true) {
    ...
} else {
    ...
}

顺便说一句，当您只是将一个函数传递给.each()时，没有理由致电.addClass()：

$('.myClass').addClass(function () {
    return $(this).data('status') ? 'myTrueClass' : 'myFalseClass';
});

Answer 3

你必须这样做：

if($(this).data('status') === true)
{
    $('#out').append('true <br>');
}
else
{
    $('#out').append('false <br>');
}

UPDATED FIDDLE

比较jquery .data（）和String总是false

3 个答案:

DEMO