交互ボタンが動作しない

Question

私は、押しているかどうかに基づいて異なる答えを与えるボタンを作ろうとしています（「はい」を取得したらボタンを押した場合と同じですが、ボタンが押されていない私はこのコードを実行すると「はい」ですが、どうすればこの問題を解決できますか？

注：私はJavascriptとJqueryの新機能ですので、あなたの答えを徹底的に説明してください。

$('#option1').data('unclicked', false) 

$('#option1').click(function() { 
    if ($('#option1').data('unclicked', false)) { 
     $('#option1').data('clicked', true); 
    } else if ($('#option1').data('clicked', true)) { 
     $('#option1').data('clicked', false); 
    } else { 
     alert('ERROR'); 
    } 

    if ($('#option1').data('clicked', true)) { 
     alert('yes'); 
    } else if ($('#option1').data('clicked', false)) { 
     alert('no'); 
    } else { 
     alert('ERROR'); 
    } 
}); 

Answer 1

1. 例えば、一貫性のあるdata属性を使用しますclickedのみ。
2. ~をと設定し、data(key)~をと設定します。
3. ブール値属性の3番目の状態があってはなりません。

これが意味：

$('#option1').data('clicked', false); 

$('#option1').click(function() { 
    if ($('#option1').data('clicked')) { 
     $('#option1').data('clicked', false); 
    } else { 
     $('#option1').data('clicked', true); 
    } 

    if ($('#option1').data('clicked')) { 
     alert('yes'); 
    } else { 
     alert('no'); 
    } 
}); 

Answer 2

あなたif文が現在の値をテストしていない、データ属性を設定しています。

if ($('#option1').data('clicked', true)) { 

、あなたはまた、2つの異なるデータ属性を持つ

if ($('#option1').data('clicked') === true) { 
// or... 
if ($('#option1').data('clicked')) { // same as above 

する必要があります「をクリック」と「unclicked」、あなたにいくつかの混乱の原因となっている - あなたはどの1あなたを（約一貫じゃありません試してみてください）あなたが更新するものをテストしてください。それを単一の属性に単純化します。

これはバグです。あなたは "真"と "偽"以外の3つ目の可能性をテストする際に不必要な作業をしています。いつもどちらか一方になるでしょう。また、データ属性をfalseに初期化する必要はありません。初期化されていない場合は、とにかくfalseと評価されます。

一緒にすべてのことを考えると、あなたのコードがこれに減らすことができます。だから、jQueryのデータ関数は要素にデータ（キーと値のペア）を結合

$('#option1').click(function() { 
 
    // 'this' is now the element that was clicked 
 
    $(this).data('clicked', !($(this).data('clicked'))) // set the data attribute to the opposite of its current value. The "!" means "not" 
 

 
    if ($(this).data('clicked')) { 
 
    alert('yes'); 
 
    } else { 
 
    alert('no'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="option1">Click</div>

Answer 3

。 問題は、 'unclicked'に値falseを追加していて、存在しない 'clicked'データをチェックしていることです。助け

$('#option1').data('unclicked', false); 

$('#option1').click(function() { 
    if ($(this).data('unclicked')) { 
    $(this).data('unclicked', false); 
    alert("it was true"); 
    } else { 
    $(this).data('unclicked', true); 
    alert("it was false"); 
    } 
}); 

希望：

はここで正しいコードです。