5

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

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

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

演示代码

$(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);
    }

有什么我想念的，为什么这不能按应有的方式工作？只是想知道它为什么这样做！

4

4 回答 4

9

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

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

祝你好运！

于 2012-08-07T20:27:02.337 回答
2

将您的第二行更改为：

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

在 if 语句中检查布尔值：

if ( _state ) {
 // do stuff
 ...
于 2012-08-07T20:28:21.847 回答
1

_state 是一个字符串（typeof _state === String //true），您需要先将其转换为布尔值（字符串始终为真）

于 2012-08-07T20:28:32.993 回答
1

如果您真的想为此使用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/

于 2012-08-07T20:28:36.713 回答