Umgestalten Javascript in Schleife

Question

Wie kann ich die folgenden in eine Schleife gesagt:

if ($('#s1').attr('checked')){ 
    image(s1, mouseX-s1.width/2+random(-brushSize, brushSize), mouseY-s1.height/2+random(-brushSize, brushSize)); 
    } 
    if ($('#s2').attr('checked')){ 
    image(s2, mouseX-s2.width/2+random(-brushSize, brushSize), mouseY-s2.height/2+random(-brushSize, brushSize)); 
    } 
    if ($('#s3').attr('checked')){ 
    image(s3, mouseX-s3.width/2+random(-brushSize, brushSize), mouseY-s3.height/2+random(-brushSize, brushSize)); 
    } 
    if ($('#s4').attr('checked')){ 
    image(s4, mouseX-s4.width/2+random(-brushSize, brushSize), mouseY-s4.height/2+random(-brushSize, brushSize)); 
    } 
    if ($('#s5').attr('checked')){ 
    image(s5, mouseX-s5.width/2+random(-brushSize, brushSize), mouseY-s5.height/2+random(-brushSize, brushSize)); 
    } 

Dank

Answer 1

Ein Beispiel, das direkt Ihre Serie von if s in eine Schleife übersetzt:

var sElements = [ s1, s2, s3, s4, s5 ]; // Declare an array so that you can reference the s1..5 variables using a numeric index stored in a variable 

for (var i = 0; i < sElements.length; i++) { // Plain old loop, nothing remotely fancy 
    if ($('#s' + (i + 1)).attr('checked')) { // Note the string concatenation with the number (i + 1) 
     var s = sElements[i]; // Put the ith element into a variable for easier referencing 
     image(s, mouseX - s.width/2 + random(-brushSize, brushSize), mouseY - s.height/2 + random(-brushSize, brushSize)); 
    } 
} 

Beachten Sie, dass Sie sollten wahrscheinlich sinnvolle Variablennamen verwenden - dies wird die Lesbarkeit und Wartbarkeit des Codes erhöhen .

Answer 2

Ich denke, die einfachste eine spezielle Klasse für jedes Element zu erstellen, die Sie zugreifen möchten (und halten die inkrementelle ID) und verwenden Sie die Funktion .each() von jquery.

So tun Sie so etwas wie

$('.yourClass:checked').each(function(index) { 
    var my_id = $(this).attr(id); // or use the index 
    image(my_id, mouseX-s5.width/2+random(-brushSize, brushSize), mouseY-s5.height/2+random(-brushSize, brushSize)); 
}); 

Answer 3

Sie sollten das Bild() Funktion als Callback anhängen für jedes Objekt einzeln.

$("#id").click(){function() { 
    image(); 
});