Рефакторинг JavaScript в цикле

Question

Как я могу поместить в цикл следующее:

 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));
    }

Спасибо

Answer 1

Я думаю, что самое простое - создать специальный класс для каждого элемента, к которому вы хотите получить доступ (и сохранить инкрементный идентификатор), и использовать функцию .each () из jquery.

Итак, вы делаете что-то вроде

$('.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 2

Один пример, который напрямую переводит вашу серию if s в цикл:

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));
    }
}

Обратите внимание, что вам, вероятно, следует использовать более значимые имена переменных - это повысит читабельность и удобство обслуживания вашего кода.

Answer 3

Вы должны прикрепить функцию image () в качестве обратного вызова для каждого объекта в отдельности.

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