奇怪的数据属性布尔问题

Question

我有一个标题的实时点击事件，该事件在打开和关闭其内容时有一个向上/向下翻转的箭头。

最奇怪的事情发生在!后跟一个变量——它应该把它从真>假翻转，反之亦然。 基本上它根本不起作用，它翻转为假并停留在那里......看看小提琴，看看我的意思。

为了简洁起见，

我删除了很多代码。

演示代码

$(document).on('click', '.regimenHeader', function () {
    var _state = $(this).attr('data-state');
    if (_state === 'true') {
        // do stuff
    }
    else { 
        // do stuff
    }
    // This is where the issue is happening, it isn't flipping the Boolean value
    // !"true" = false, !true = false, it works with strings or booleans
    $(this).attr('data-state', !_state);
});​

如果我执行以下操作，我可以让它正常工作：

    if (_state === 'true') {
        // Manually flip the data-state boolean
        $(this).attr('data-state', false);
    }

我错过了什么，为什么这没有按应有的方式工作？只是想知道它为什么要这样做！

Answer 1

我认为您正在尝试这样做：

http://jsfiddle.net/JKUJb/2/

如果是这样，问题是您使用的是返回字符串的.attr()，因此，如果您转换：

!"true" //false
!"false" //false

另一方面，.data()返回已经"强制转换"的值

编辑：

为了更清楚，在javascript中，唯一的错误值是：

false;
null;
undefined;
'';
0;
NaN;

所以如果你真的想使用 .attr() ，你可以，但我建议你先这样做：

var _state = $(this).attr('data-state') === 'true'; //if 'true' then true, false otherwise

祝你好运！

Answer 2

将第二行更改为：

var _state = $(this).attr('data-state') == 'true';

在 if 语句中检查布尔值：

if ( _state ) {
 // do stuff
 ...

Answer 3

_state是一个

字符串（类型_state === 字符串//true），您需要先将其转换为布尔值（字符串将为真）

Answer 4

如果你真的想为此使用data-属性，请使用jQuery的.data方法来检索和设置值。它会自动将字符串"true"转换为布尔值，或将字符串"1"转换为数字：

$(document).on('click', '.regimenHeader', function () {
    var _state = $(this).data('state');
    if (_state) {
        // do something
    }
    $(this).data('state', !_state);
});​

http://jsfiddle.net/mblase75/JKUJb/6/

或者你可以切换一个类——你可以使用 .hasClass 方法返回一个布尔值：

$(document).on('click', '.regimenHeader', function () {
    var _state = $(this).hasClass('data-state');
    if (_state) {
        // do something
    }
    $(this).toggleClass('data-state');
});​

http://jsfiddle.net/mblase75/JKUJb/3/