Refactor javascript into loop

Question

How can I put the following into a loop:

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

Thanks

Can you provide anymore code relating to the image() function or the s1,...,s5 variables? — jerluc
– jerluc, Commented Jan 14, 2011 at 4:22
i would make an array for #s instead of variables -> easier to keep track of and smoother — tekknolagi
– tekknolagi, Commented Jan 14, 2011 at 4:22
then i would use the switch() statement to go through the array — tekknolagi
– tekknolagi, Commented Jan 14, 2011 at 4:23
image() is part of processing.js s1-s5 are just setting the image eg s1 = loadImage("images/stars/1.png"); — Rigil
– Rigil, Commented Jan 14, 2011 at 4:23
It would be better if s1-s5 were not local variables, but either items in an array or properties of an object. — Phrogz
– Phrogz, Commented Jan 14, 2011 at 4:25

Simon marc · Accepted Answer · 2011-01-14 04:30:37Z

1

I think the simplest is to create a special class for every element you want to access (and keep the incremental id) and use the .each() function from jquery.

So you do something like

$('.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));
 });

answered Jan 14, 2011 at 4:30

Simon marc

1,0037 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Simon marc Over a year ago

Sorry I but my_id into the image funtion, but use the id to get the data from array, or whatever you have.

Cameron · Accepted Answer · 2011-01-14 04:37:15Z

0

One example that directly translates your series of ifs into a loop:

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

Note that you should probably use more meaningful variable names -- this will increase the readability and maintainability of your code.

edited Jan 14, 2011 at 4:37

answered Jan 14, 2011 at 4:31

Cameron

99.4k29 gold badges206 silver badges233 bronze badges

Comments

Nick · Accepted Answer · 2011-01-14 04:31:13Z

0

You should attach the image() function as a callback for each object individually.

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

answered Jan 14, 2011 at 4:31

Nick

3011 gold badge3 silver badges15 bronze badges

Collectives™ on Stack Overflow

Refactor javascript into loop

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related