奇怪的數據屬性布爾問題

我有一個直播點擊事件的頭部有一個箭頭翻開上/下打開&關閉它的內容。奇怪的數據屬性布爾問題

最奇怪的事情發生在!後面跟着一個變量 - 這應該是從真實 - >錯誤，反之亦然。基本上它根本不工作，它翻轉爲假，並留在那裏...檢查小提琴，看看我的意思。

爲了簡潔起見，我刪除了很多代碼。

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

有我丟失的東西，爲什麼這不工作應該的方式？？只是想知道爲什麼它這樣做！

來源

2012-08-07 Mark Pieszak - DevHelp.Online

我認爲你正在試圖做到這一點：

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

如果是這樣，問題是，你正在使用.attr()返回一個字符串，因此，如果您轉換：

!"true" //false 

!"false" //false

.data()另一方面返回已經「鑄造的數值」

編輯：

只是要更清晰，在JavaScript中唯一falsy值是：

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

所以如果你真的想使用.attr()，你可以，但我建議你首先要做：

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

祝你好運！

來源

2012-08-07 20:27:02 NicoSantangelo

下一次我會堅持'。數據（）'哈哈。我只是希望它在[data-state]中可見，所以我可以搜索它們，而不是遍歷所有頭文件，然後查看它們是否具有'.data（'state'）=== true等。雖然欣賞幫助！ – 2012-08-07 20:41:25

很高興我幫助過，如果你在元素中有一些信息，'.data（）'這可能是你正在尋找的東西:)。以防萬一你想看到一些性能測試：http://jsperf.com/jquery-data-vs-attr/22 – NicoSantangelo 2012-08-07 20:45:15

更改您的第二行：

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

而且在if語句檢查布爾：

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

來源

2012-08-07 20:28:21 Vlad

在那裏它是...我只需要把它變成布爾，感謝弗拉德。工作就像一個魅力：http://jsfiddle.net/JKUJb/4/ – 2012-08-07 20:39:42

_STATE是一個String（typeof運算_STATE ===字符串//真正的），你需要將其轉換爲布爾首先（一個字符串將alua爲真）

來源

2012-08-07 20:28:32 yoelp

如果你真的想使用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-07 20:28:36 Blazemonger

我想這樣做，在這一點上，只是想弄清楚爲什麼'數據'表現得如此奇怪，但我現在看到，它一直在返回爲一個字符串，我不測試它在這裏：'var _state = $（this）.attr（'data-state'）==='true'' – 2012-08-07 20:38:12

奇怪的數據屬性布爾問題

回答

相關問題