Compare jquery .data() with String always false

Compare jquery .data() with String always false

本文关键字：String always false with jquery data Compare      更新时间：2023-09-26

首先是小提琴:http://jsfiddle.net/6d82Q/1/

在我的HTML中我有:

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

我想根据状态为div添加一个CSS-class:

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

问题是，总是添加myFalseClass。我的问题是:如何解决这个问题，为什么它会首先发生?

试试，

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

因为.data(key)会自动将"true"转换为布尔值。

演示

当然，如果你想获得"true"作为一个字符串，那么只需使用.attr("data-status")

.data()方法将对[data-*]属性执行一些自动强制转换，这使得向客户端传递数据非常方便。

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

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

如果你需要确保值是true，而不仅仅是真值(如1的值)，那么一定要使用引用比较:

if ($(this).data('status') === true) {
    ...
} else {
    ...
}
作为题外话，当您可以简单地将函数传递给.addClass()时，没有理由调用.each(): 
$('.myClass').addClass(function () {
    return $(this).data('status') ? 'myTrueClass' : 'myFalseClass';
});

你必须这样做:

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

更新小提琴

相关文章：