Geek Answers Handbook

JQuery Looping and Click Event Binding

Ok, I tried a few things and looked for answers to this, and I can't get it to work. What I'm trying to do is some dynamically generated images, so I don't know how many images there will be at any time. Each image has some related information that I store in a separate div. What I want to do is attach a click event to each image that displays a div that has related content.

I tried a loop with a for and while loop, but to no avail. What happens in both cases, they perfectly attach the click event, but no matter what image is clicked, the same div always opens, and the div is not associated with the image.

var cnt = jQuery('#container img').length; cnt = cnt - 1; var i = 0 for(i=0; i<=cnt; i++) { jQuery('#container img').eq(i).click(function() { jQuery('.movie' + 1).slideDown(); jQuery('#sort').hide(); }); } while(i<=cnt) { jQuery('#container img').eq(i).click(function() { jQuery('.movie' + i).slideDown(); jQuery('#sort').hide(); }); i++

}

Above are two different options that I have tried. In the second there are no variables defined here, but in my code they do. What I am doing is counting the number of images that I have (var cnt) and then using this to go through the correct number of times. I assume that something should be confused in the click function, as it attaches it to each image, but gets the wrong div.

EDIT:

As in some comments, I tried to change my structure as follows:

 <div id="container"> <img /> <img /> <div class="expanded"> // Info Goes Here </div> <div class="expanded"> // Info Goes Here </div> </div>

Then I tried the code:

 jQuery(document).ready(function() { jQuery('#container img').click(function () { jQuery(this).next('div.expanded').show(); }); });

But that doesn't work either. The first image does nothing, and the second shows the wrong div.

+4
source share
4 answers

You are likely to significantly overwork it. Assuming a regular structure with something like this:

 <div id="container"> <img /> <div class="info"> <img /> <div class="info"> <img /> <div class="info"> </div>

You could get it all at once ... something like this:

 $('#container img').click(function () { $(this).next('div').show(); });

To know exactly how to structure the body of the function in the click handler, we need to see the full markup, but this should get closer, easier.

To cover comments / questions, we use .next('div') , which finds the closest relative after the element referenced by $(this) . For this, images must alternate with information divs. Otherwise, you need some kind of numbering system, which you can return to. I updated my example a bit. Let me know if this helps.

Alternatively, if we are working with a numbering system:

 <div id="container"> <img class="group1" /> <img class="group2" /> <img class="group3" /> <div class="group1" /> <div class="group2" /> <div class="group3" /> </div>

With the following JavaScript settings:

 $('#container img').click(function () { var $this = $(this); $this.next('div.' + $this.attr('class')).show(); });

This should be very close to you. You will notice that the image and div share a class, which is numbered as a way to link them together.

+5
source

Without looking at the html, you need to somehow associate img with the div either with the attribute or with its order in the document. Another thing is that you don't need a loop, jQuery will automatically bind events for each selected item in your query.

0
source

try it

 jQuery('#container img').each(function(){ $(this).bind('click', function(){ $('.movie' + $(this).index()).slideDown(); }); });

I need to optimize a bit, but I'm on an iPad :)

0
source

The first one does not work, because it is always a class selector .movie1. Maybe you meant "I", but despite this, both loops should work, not paying attention to their unpleasant code above your head.

0
source

More articles:


All Articles