Vereinfachen Sie Codes mit While-Schleife

Question

Ich versuche, meinen Code mit While-Schleife zu vereinfachen, aber der Wert scheint nicht anzuhängen. Hier ist ein Beispiel

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

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

Jedesmal, wenn ich ein button klicken enthalten einen classanalytics1-5 es einen Wert von 20 zurückkehrt, wenn ich es erwarte 1,2,3,4,5 zu sein. Ich habe eine vage Idee, dass ich 20 an die function analytics übergebe, da die while-Schleife bereits beendet ist, wenn ich auf eine button klicke. Kann mir das jemand erklären?

Answer 1

Neue Antwort basierend auf früheren Kommentare zu früheren Antwort.

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

Falls sich jemand findet diese Frage in der Zukunft.

ES6 löst dieses Problem, indem Sie zulassen lassen.obwohl

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

Edit: Ich habe ein wenig übereifrig mit meiner Bearbeitung Ihrer Frage. Ich entschuldige mich, wenn ich andere Leute abgeworfen habe, die geantwortet haben.

Sie stoßen auf ein Problem mit Umfang/Bindung. Es ist so lange her, dass ich mich mit < ES6 beschäftigt habe, dass ich wirklich Mühe hatte, mich daran zu erinnern, wie ich es lösen kann. Ich habe meine Antwort aktualisiert, um eine mögliche Lösung zu haben.

Diese SO von Art deckt es besser als ich: 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>

Ursprüngliche irrelevante Antwort:

Ugh, Sie sind verbindlich mehrere. Sie haben 20 Klickereignisse an dieses Stück DOM gebunden. Sobald Sie klicken, sehen Sie nur die letzte.

Die Schleife wartet nicht darauf, dass Sie klicken. Sie können dies bestätigen, indem Sie console.log(x); in die Schleife setzen und F12 drücken, um zu sehen, dass alle 20 Ereignisse gebunden haben, bevor Sie klicken.

Answer 3

Sie sagen im Grunde, dass nach dem Klicken auf 21 zählen und die Funktion 20 Mal ausführen.

Ich denke, was du meinst zu tun, dauert nur ein kurzes zwicken in der Logik;

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>

Wobei das Beispiel, das ich dort zum Beispiel nur eine console.log schlug aber Sie könnten Ihre Methode stattdessen auszuführen. Hoffe, das hilft, Prost.

Answer 4

Versuchen Sie dieses:

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

Answer 5

Dies funktioniert der Trick für mich

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

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

    } 

danke für den Link @mkaatman