javascript - 奇怪的数据属性 bool 问题

Question

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

最奇怪的事情发生在 ! 后跟一个变量——它应该将它从 true -> false 翻转，反之亦然。基本上它根本不起作用，它会变为 false 并停留在那里...查看 fiddle 以了解我的意思。

为了简洁起见，我删除了很多代码。

Demo Code

$(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

祝你好运!