jqueryクラス要素の現在のデータ値を見つける

Question

イベント時にデータ属性の現在の値を見つける方法、 コンソールログを確認すると、未定義と表示されます。

これは私のコードです。

<li> 
<span class="glyphicon connected" data-connected-node="10"></span> 
</li> 

<li> 
<span class="glyphicon connected" data-connected-node="11"></span> 
</li> 


var clickCount = 0; 
    $('.connected').click(function(e){ 
     e.preventDefault(); 
     clickCount++; 
     setTimeout(function(){ 
      if(clickCount == 1) { 
       var connectedNode = $(this).attr('data-connected-node'); 
       console.log(connectedNode); // undefined 
       $('#LoadedEvents').modal({ 
        show: true 
       }); 
      } 
      if(clickCount > 1) { 
       $('#exampleModal').modal({ 
        show: true 
       }); 
      } 
      clickCount = 0; 
     }, 300); // The amount of time between clicks 
    }); 

Answer 1

これは、あなたがパラメータとしてではなく、タイムアウトハンドラ内でそれを読み取ろうと一緒に属性値を渡した場合に解決すべきスコープの問題かもしれません

$('.connected').click(function(e){ 
    e.preventDefault(); 
    clickCount++; 
    var connectedNode = $(this).attr('data-connected-node'); 
    setTimeout(function(connectedNode){ 
     if(clickCount == 1) { 
      console.log(connectedNode); // undefined 
      $('#LoadedEvents').modal({ 
       show: true 
      }); 
     } 
... 

を試してみてください。実行ポイントで$(this)がundefinedになると仮定します。

Answer 2

、変数で事前に宣言$(this)要素によるテストとその変数から属性の値を収集

HTML

<li> 
    <span class="glyphicon connected" data-connected-node="10"></span> 
</li> 

<li> 
    <span class="glyphicon connected" data-connected-node="11"></span> 
</li> 

はJavaScript

$(document).ready(function() { 
    var clickCount = 0; 
    $('.connected').click(function(e){ 
     var thisClass = $(this); 
     e.preventDefault(); 
     clickCount++; 
     setTimeout(function(){ 
      if(clickCount == 1) { 
       var connectedNode = thisClass.attr('data-connected-node'); 
       console.log(connectedNode); // 10 or 11 
       $('#LoadedEvents').modal({ 
        show: true 
       }); 
      } 
      if(clickCount > 1) { 
       $('#exampleModal').modal({ 
        show: true 
       }); 
      } 
      clickCount = 0; 
     }, 300); // The amount of time between clicks 
    }); 
}); 

Answer 3

次のように私は思います：

var clickCount = 0; 
    $('.connected').click(function(e){ 
     e.preventDefault(); 
     clickCount++; 
     ***var thisNode = $(this);*** 
     setTimeout(function(){ 
      if(clickCount == 1) { 
       var connectedNode = ***thisNode*** .attr('data-connected-node'); 
       console.log(connectedNode); // undefined 
       $('#LoadedEvents').modal({ 
        show: true 
       }); 
      } 
      if(clickCount > 1) { 
       $('#exampleModal').modal({ 
        show: true 
       }); 
      } 
      clickCount = 0; 
     }, 300); // The amount of time between clicks 
    });