jQuery - クラスの発生をクリック時のそれぞれのデータに設定する

Question

私が達成したいのは、クラスのすべての発生を指定されたデータに設定することです - 特定の発生をクリックしたものを除いて、以下のコードは "y"変数に未定義のエラーを与えます。データセットを文脈化するにはどうすればいいですか？

<div id="menu"> 
     <ul> 
      <li id="menu-tos" data-info="TERMS OF SERVICE">TERMS OF SERVICE</li> 
      <li id="menu-contact" data-info="CONTACT">CONTACT</li> 
      <li id="menu-signup" data-info="SIGN UP">SIGN UP</li> 
      <li id="menu-login" data-info="LOG IN">LOGIN</li> 
     </ul> 
    </div> 

    <script> 
     $('#menu ul li').click(function() { 
     i = $(this.id); 
     y = dataset.info; 
     $('#menu ul li').not(i).html(y); 
     $(i).html('Something unique'); 
     }); 
    </script> 

Answer 1

あなたの未定義の（一番下までスクロールし、説明を省略し、作業バージョンを表示するには）エラーは、datasetにアクセスしようとしているため、実際には小道具の場合は変数ですDOM要素オブジェクトの詳細（here）これは$('menu-tos')に

• i = $(this.id);を解決します：私が正しくあなたの希望する機能を理解していた場合

  また、あなたのコードとに実行されます夫婦他の問題があります。経由地IDを選択するには、のように#が必要です。あなたのケースでは、現在、$(this)で利用可能であるため、現在の要素を変数に設定する理由はありません。

• datasetはHTML要素オブジェクトのプロパティであり、変数ではないため、y = dataset.info;は機能しません。 jQueryを使用しているので、$(this).data('info')を使用する方が簡単です。
• $('#menu ul li').not(i).html(y);これはあなたがしようとしていることをしません。これは、他のすべての<li>要素のHTMLを、あなたが今クリックしたものの値に設定します。独自の値にそれぞれ1を設定するには、iがjQueryオブジェクトとして正しく設定されたと仮定し.each()
• $(i).html('Something unique');を使用してそれらを介してループする必要があります、あなたはちょうどi.html('Something unique');
を使用することができ、ここではjQueryのラッパーを必要としませんあなたのコードを助ける

カップル他のもの：

• あなたは（varを使用せずに）今、あなたの変数を設定する方法、それがグローバルスコープにそれらを設定します。これはうまくいくかもしれませんが、衝突を引き起こす可能性があり、一般的に回避されます。 varをvar i = $(this);のように使用すると、その変数はclick()機能の範囲内でのみ保持されます。
• jQueryを使用する場合は、$(document).ready()コールバックにコードをラップする必要があります。これにより、jQueryがイベントハンドラ（クリックハンドラなど）をバインドしようとする前に、DOMがロードされるようになります。

  $(document).ready(function() { // ensure document is loaded before running code 
      $('#menu ul li').click(function() { 
  
       // set all other elements to their own data-info attribute value 
       $('#menu ul li').not(this).each(function() { 
        var info = $(this).data('info'); 
        $(this).html(info); 
       }); 
  
       // set the clicked item to 'Something unique' 
       $(this).html('Something unique');   
      }); 
  }); 
  

  チェックアウトthis JSFiddle上の作業コード：ここで言及した問題を修正した後

は、javascriptのコードは次のように見てしまいます。

Answer 2

次のように試してみてください：ここ

$('#menu ul li').click(function() { 
    $(this).siblings().each(function() { 
    var info = $(this).data('info'); 
    $(this).html(info); 
    }); 
    $(this).html('Something unique'); 
}); 

全例https://jsfiddle.net/_jakob/q49kq3c5/1/