whileループを使用したコードの簡略化

Question

whileループを使用してコードを単純化しようとしていますが、値を付けることができません。 は、ここで私は、私はそれが1,2,3,4,5であることを期待するときclassanalytics1-5それは20の値を返す含むbuttonをクリックしてください例

var x=1; 
    while(x <= 20){ 
    $('.analytics' + x).click(function(event){ 
     analytics(x); 
    }); 
    x++ 
    } 

    var analytics = function(num){ 
    alert(num); 
    }; 

毎回です。私は、buttonをクリックしたときにwhileループが既に終了しているので、私がfunction analyticsに20を渡しているというあいまいな考えがあります。誰かが私にこれを説明することはできますか？

Answer 1

前の回答の前のコメントに基づいて新しい答えを私のため

for (var i=1; i<=20; i++) { 

    function clickHandler(num) {  
     $(".analytics" + i).click (function(event){ 
      analytics(num); 
     }) 
    } 
    clickHandler(i); 

    } 

おかげでトリックを行います。場合

$(document).ready(function() { 
 
    $('.analytics').on('click', function(event) { 
 
    analytics($(this).data("id")); 
 
    }); 
 

 
    function analytics(num) { 
 
    console.log(num); 
 
    }; 
 
});

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

 
<div class="analytics" data-id=1>A1 id1</div> 
 
<div class="analytics" data-id=2>A2 id2</div> 
 
<div class="analytics" data-id=42>A3 id42</div> 
 
<div class="analytics" data-id=17>A4 id17</div>

誰もが将来的にこの質問を見つけました。

ES6では、letを使用することでこの問題を解決しています。しかし

$(document).ready(function() { 
 
    for (let i = 1; i <= 5; i++) { 
 
    $('.analytics' + i).click(function(event) { 
 
     analytics(i); 
 
    }); 
 
    } 
 

 
    function analytics(num) { 
 
    console.log(num); 
 
    }; 
 
});

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

 
<div class="analytics1">A1</div> 
 
<div class="analytics2">A2</div> 
 
<div class="analytics3">A3</div> 
 
<div class="analytic4s">A4</div>

Answer 2

編集：私はあなたの質問に私の編集を少し過熱してしまった。私が答えた他の人を捨てると謝罪します。

スコープ/バインディングの問題が発生しています。私が< ES6を扱って以来、私は本当にそれを解決する方法を覚えていました。 1つの解決策を得るために私の答えを更新しました。 Javascript infamous Loop issue?

$(document).ready(function() { 
 
    for (var i=1; i<=5; i++) { 
 
     $('.analytics' + i).click(function(event) { 
 
     analytics($(this).index()); 
 
     }); 
 
    } 
 

 
    function analytics(num) { 
 
    console.log(num); 
 
    }; 
 
});

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

 
<div class="analytics1">A1</div> 
 
<div class="analytics2">A2</div> 
 
<div class="analytics3">A3</div> 
 
<div class="analytics4">A4</div>

オリジナル無関係の答え：

これはSO種類の私がやったよりも良い、それをカバーしてい

うわ、あなたはバインディング複数あります。あなたは20個のクリックイベントをそのDOM部分にバインドしています。クリックすると、最後のものだけが表示されます。

ループはあなたがクリックするのを待っていません。これを確認するには、console.log(x);をループの内側に置き、F12を押してクリックする前にすべての20個のイベントがバインドされていることを確認します。

Answer 3

基本的には、一度クリックすると21にカウントされ、20回機能が実行されます。

私はあなたがすることを意味すると思うだけで、ロジックを素早く微調整します。

var x=1; 
 
$('.analytics').click(function(event){ 
 
    while(x <= 20){ 
 
     console.log(x);  
 
    x++ 
 
    } 
 
});

button { 
 
    padding: 1rem; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="analytics">Something to Click to Count to 20</button>

の例では、私はちょうど例えばそこではconsole.logを平手打ちいますが、代わりにあなたの方法を実行することができることを特徴とします。これがうまくいくことを願って、歓声。

Answer 4

この方法を試してください。

 var x = 1; 
    $(document).on('click','.analytics',function(){ 
     while(x <= 20){ 
     analytics(x); 
      x++; 
    } 
    }); 
    function analytics(num){ 
     alert(num); 
     }; 

Answer 5

これはリンク@mkaatman