Jquery Create "array" of .click functions

Question

I have a set of divs:

<div id="div_01">ASD</div>
<div id="div_02">ASD</div>
<div id="div_03">ASD</div>

I want to create a set of .click functions for those divs:

I tried this:

    for (var i = 1; i < 4; i++) {
        var picName = "#BSViolenceDiv_0" + i.toString();
        //alert("\nI have for i: " + i + ": " + picName);
        $("#div_0" + i.toString()).click(function(){
             $("#div_0" + i.toString()).animate({opacity:1}, 1000);
         });    
    }

It does not work because i ends up being 3.

What did I do wrong?

You do not need to create a whole bunch of click event handlers. Just use a class and bind that click handler to that class instead just like the answer of @Zakaria. — dokgu
– dokgu, Commented Oct 25, 2016 at 20:30

Zakaria Acharki · Accepted Answer · 2016-10-25 20:42:17Z

2

It'll be better if you could use a global class instead (e.g my_div) like:

<div id="div_01" class="my_div">ASD</div>
<div id="div_02" class="my_div">ASD</div>
<div id="div_03" class="my_div">ASD</div>

Then attach click event to this class so you don't need to loop through all the div's :

$(".my_div").click(function(){
    $(this).animate({opacity:1}, 1000); // "$(this)" refer to the clicked div
})

Hope this helps.

$(".my_div").click(function(){
  $(this).animate({opacity:1}, 1000);
})

.my_div{
  opacity: 0.3;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div_01" class="my_div">ASD</div>
<div id="div_02" class="my_div">ASD</div>
<div id="div_03" class="my_div">ASD</div>

edited Oct 25, 2016 at 20:42

answered Oct 25, 2016 at 20:27

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

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

Comments

trincot · Accepted Answer · 2016-10-25 20:33:06Z

1

The variable i has reached its final value before the code in the click event handler is executed, so it will always use that final value in the click handler, and as a consequence the selector "#div_0" + i.toString() will not refer to the element clicked on.

But you don't really need i to refer to the clicked element. Just use this:

Replace:

$("#div_0" + i.toString()).animate

with:

$(this).animate

That is the essence of your error. But as others have stated you don't need to create a separate handler for each div. Just create one for all, for instance by creating a class for them, and use that to select the div elements.

answered Oct 25, 2016 at 20:33

trincot

357k38 gold badges282 silver badges338 bronze badges

Collectives™ on Stack Overflow

Jquery Create "array" of .click functions

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related