Question

我有一个现场点击活动，一个标题在打开时向上/向下翻转箭头。关闭它的内容。

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

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

$(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语句中检查boolean：

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

Answer 3

_state是一个String（typeof _state === String // 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/

奇怪的数据属性布尔问题

4 个答案: