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

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) 最初にブール値に変換する必要があります (文字列は常に 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 に答える