74649

Target items in an array on click?

Question:

Bear in mind I'm a javascript/jquery/stackoverflow newbie. I have an array of JQuery objects (each one is an image). Right now I've got a separate function for each item in the array:

var $photos = []; $photos.push($('img.one'), $('img.two'), $('img.three'), $('img.four'), $('img.five'), $('img.six')); $('.thumbnails img.two').click(function(){ $('div#slide-container').fadeIn('fast'); setTimeout(function(){ $('div#slideshow').slideDown('fast');}, 200); setTimeout(function(){ images[1].fadeIn('fast');}, 500); });

In other words I have the above code for each of the 5 indexes in the array. How can I write this so that I can target whichever photo is clicked using just one function instead of six? So instead of "images[1]" specifically, I can just say "images[i]".

Here's a link to a live version of this:

<a href="http://www.noticeeverything.com/photos/" rel="nofollow">http://www.noticeeverything.com/photos/</a>

Answer1:

$('.thumbnails img').click(function(){ var $this = $(this); $('div#slide-container').fadeIn('fast'); setTimeout(function(){ $('div#slideshow').slideDown('fast');}, 200); setTimeout(function(){ $this.fadeIn('fast');}, 500); });

Also I think you can use callback instead of setTimeout

$('.thumbnails img').click(function(){ var $this = $(this); $('div#slide-container').fadeIn('fast', function(){ $('div#slideshow').slideDown('fast', function(){ $this.fadeIn('fast'); }); }); });

Answer2:

You can write a general click handler for all the images that uses $(this) to refer to the element clicked on. To make it available in the setTimeout callback, you'll need to set a local variable to it, so it will be saved in the closure.

$(".thumbnails img").click(function() { var $this = $(this); $('div#slide-container').fadeIn('fast'); setTimeout(function() { $('div#slideshow').slideDown('fast'); }, 200); setTimeout(function() { $this.fadeIn('fast'); }, 500); });

UPDATE:

There's no need for the array. This version just assumes that the images in the slideshow are in the same position as the TDs containing the corresponding thumbnails, and uses .eq() to find them.

$("#thumbnails img.thumb").click(function () { var index = $(this).closest('td').index(); $('div#slide-container').fadeIn('fast'); setTimeout(function () { $('div#slideshow').slideDown('fast'); }, 200); setTimeout(function () { $("div#slideshow img").eq(index).fadeIn('fast'); }, 500); });

<a href="http://jsfiddle.net/barmar/scptM/5/" rel="nofollow">DEMO</a>

The reason $(this) wasn't being set earlier is because you had .thumbnails, and I copied that, but it should be #thumbnails. So the selector wasn't matching the elements.

Answer3:

You can use jQuery <a href="http://api.jquery.com/category/selectors/" rel="nofollow">selectors</a>. In this case, you will use the 'ancestor descendant' (<a href="http://api.jquery.com/descendant-selector/" rel="nofollow">http://api.jquery.com/descendant-selector/</a>) - <strong>Selects all elements that are descendants of a given ancestor</strong>.

This:

// Everything inside `.thumbnails` with tag `img` $('.thumbnails img') <h3>HTML (example)</h3> <ul class="thumbnails"> <li><img src="..."></li> <li><img src="..."></li> <li><img src="..."></li> <li><img src="..."></li> </ul> <h3>jQuery</h3> (function($){ $('.thumbnails img').on('click',function(e){ e.preventDefault(); // do someting... }); })(jQuery);

Recommend

  • Jquery Nested Functions Not Working
  • layout / masonry - delayed layout adjustment - one click behind
  • Jquery Dropdown on Click
  • Can you stop jquery cycle from overwriting inline absolute position?
  • Isotope Filters to only display Filtered Light Gallery images
  • Set the amount of displaying Flex Slider carousel image
  • slidedown and slideup looping bug in firefox
  • Function to check if jquery plugins are already initialized
  • Fading in large images in Chrome
  • How to change slowly background attributes in jquery?
  • How do I deselect all table rows in NSOutlineView when clicking in the empty space of the view?
  • Seamless scrolling text
  • How to put all my selected columns into a dummy variable?
  • IE8 stops network access after 5 long polling request
  • Get an index of a sorted matrix
  • setTimeOut and local function
  • mysql and indexes with more than one column
  • help('modules') crashing? Not sure how to fix
  • Can XOR be expressed using SKI combinators?
  • div fade-in when window is scrolled a certain distance from the top
  • Python: sending key press events over SSH
  • Check all values in string[] for length?
  • HTTP/2 streams vs HTTP/1.1 connections
  • Is there a way to do normal logging with EureakLog?
  • Syntax for setting draggablecursor property in google maps api
  • Asynchronous UI Testing in Xcode With Swift
  • Email format validation in mvc3 view
  • C# - Is there a limit to the size of an httpWebRequest stream?
  • How to add date and time under each post in guestbook in google app engine
  • Menu Color Fade on Hover with Jquery
  • Large data - storage and query
  • GridView Sorting works once only
  • PHP: When would you need the self:: keyword?
  • How to get icons for entities from eclipse?
  • Acquiring multiple attributes from .xml file in c#
  • coudnt use logback because of log4j
  • How to CLICK on IE download dialog box i.e.(Open, Save, Save As…)
  • How can I remove ASP.NET Designer.cs files?
  • Does armcc optimizes non-volatile variables with -O0?
  • java string with new operator and a literal