使用while循環簡化代碼

-1

我試圖簡化我的代碼使用while循環但值似乎無法附加。下面是一個例子使用while循環簡化代碼

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

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

每次我點擊一個button含有classanalytics1-5它，當我希望它是1,2,3,4,5返回20的值。我有一個模糊的想法，我傳遞20到function analytics，因爲while循環已經結束，當我點擊一個button。誰可以給我解釋一下這個？

來源

2017-06-29 Gilbert Mendoza

基於前面的回答先前的評論新的答案。

$(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>

來源

2017-06-29 05:43:10 mkaatman

感謝您的支持。一個新的探索方式，我會接受這個謝謝你 –

編輯：我對你的問題進行了一些過度熱心的編輯。如果我拋棄了其他回答的人，我很抱歉。

您正遇到範圍/綁定問題。自從我處理了< ES6以來，我一直在努力記住如何解決這個問題。我已經更新了我的答案，有一個可能的解決方案。

這太客氣了涵蓋它比我做的事： 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>

原始答非所問：

唉，你多重結合。您已將20個點擊事件綁定到該DOM。一旦你點擊你只看到最後一個。

該循環不會等待您點擊。你可以通過在循環中加入console.log(x);來確認，並在點擊之前按下F12以查看所有20個事件已經綁定。

來源

2017-06-29 04:23:40 mkaatman

，雖然厭惡的表達。 –

他們：「爲什麼這個ajax方法發射40次？！」我：「因爲每次你改變標籤，你都在重新綁定它。」 – mkaatman

你不應該編輯某個人的原始問題到這個程度，回滾，對不起朋友。 :) –

你基本上告訴它，一旦它被點擊，數到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在那裏例如但你可以執行你的方法，而不是實例。希望這有助於，歡呼。

來源

2017-06-29 04:34:07

我實際上需要將分析結果放在while循環中，因爲生病使用的類的名稱是analytics1 analytics2 ... –

試試這個：

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

來源

2017-06-29 04:49:59

這是否把戲對我來說

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

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

    }

感謝您的鏈接@mkaatman

來源

2017-06-29 05:40:46

使用while循環簡化代碼

回答

相關問題