generating multiple jquery click function

Question

client side takes in some images from server, then base on that create thumbnails pictures. When user click on these thumbnails it does something. However the number of images sent from server can be any number. So now I am stuck, I don't know how to generate click function without writing each one out like below. Can someone guide me to the right direction without giving me the actual answer?

            $("#thumb-0").click(function(){
                index=0;
                switchHouse(index);
            });
            $("#thumb-1").click(function(){
                index=1;
                switchHouse(index);
            });
            $("#thumb-2").click(function(){
                index=2;
                switchHouse(index);
            });
                            ...
            $("#thumb-X").click(function(){
                index=arrayLength;
                switchHouse(index);
            });

I tried the following, but doesnt work obviously:

            for (var i=0; i<topHouse.length; i++){
                $("#thumb"+i).click(function(){
                    index=i;
                    switchHouse(index);
                });
            }

same with @Asad's solution, but a demo here: jsfiddle.net/aGfNS/1 — lastr2d2
– lastr2d2, Commented Sep 26, 2013 at 18:04
You are missing the dash in "#thumb"+i it should be "#thumb-"+i — Danny
– Danny, Commented Sep 26, 2013 at 18:06

user1726343 · Accepted Answer · 2013-09-26 17:54:37Z

4

When iterating, each function closes over the variable i. When the function is evaluated the value of i has reached the end of the iteration. In other words, when you click a thumbnail, the value of i is topHouse.length, and so the function essentially sets index = topHouse.length.

Try using a closure, so that each handler has its own index value:

for (var i=0; i<topHouse.length; i++){
    $("#thumb"+i).click((function(index) {
        return function() {
            switchHouse(index);
        }
    })(i));
}

answered Sep 26, 2013 at 17:54

user1726343

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

3 Comments

user308553 Over a year ago

can u tell me why we need return function(){}, I am pretty new to this

user1726343 Over a year ago

@user308553 Sure. You see, we want to be able to refer to the value of i at that particular iteration, without having our handler close over i and keep up to date on its value. When I say "close over", I mean that if you refer to i in a function directly, the function will latch onto the actual i variable, which keeps changing with every iteration. To avoid this, we pass the value of i to an anonymous function (inside click) that creates your desired handler function and returns it. The inner function is latching on to the index parameter, which will have a value of i.

user1726343 Over a year ago

@user308553 You should read up on closures in Javascript. That will make this clearer.

Ricardo Nuñez · Accepted Answer · 2013-09-26 18:04:11Z

3

You can use the Starts With

$( document ).ready(function() {

$("[id^='thumb']").click(function() {
    switchHouse( $(this).index() );  // or add $(this).index()+1

});

answered Sep 26, 2013 at 18:04

Ricardo Nuñez

9891 gold badge13 silver badges17 bronze badges

Comments

Jason P · Accepted Answer · 2013-09-26 17:52:32Z

2

Here's one solution.

Change your markup to this:

<whatever class="thumbnail" data-index="1" />

And your handler to this:

$('.thumbnail').click(function() {
    switchHouse($(this).data('index'));
});

answered Sep 26, 2013 at 17:52

Jason P

27k3 gold badges34 silver badges45 bronze badges

Comments

Taz · Accepted Answer · 2013-09-26 18:06:36Z

1

Add a class to each image with a unique thumb ID so you can target it with Jquery. Then do this.

<img id="thumb-25" class="aThumb" src="...">

 $('.aThumb').click(function(e){
var getTheID = $(this).attr('id');
getTheID = getTheID.substring(6);

// switchHouse(getTheID);
  alert(getTheID);
});

answered Sep 26, 2013 at 18:06

Taz

1842 silver badges7 bronze badges

Collectives™ on Stack Overflow

generating multiple jquery click function

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related