Cible des éléments dans un tableau au clic?

Gardez à l’esprit que je suis un débutant javascript / jquery / stackoverflow. J’ai un tableau d’objects JQuery (chacun étant une image). À l’heure actuelle, j’ai une fonction distincte pour chaque élément du tableau:

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

En d’autres termes, j’ai le code ci-dessus pour chacun des 5 index du tableau. Comment puis-je écrire ceci afin de pouvoir cibler la photo sur laquelle on clique en utilisant une seule fonction au lieu de six? Ainsi, au lieu de “images [1]”, je peux simplement dire “images [i]”.

Voici un lien vers une version en direct de ceci:

http://www.noticeeverything.com/photos/

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

Aussi, je pense que vous pouvez utiliser le rappel au lieu de setTimeout

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

Vous pouvez écrire un gestionnaire de clic général pour toutes les images utilisant $(this) pour faire référence à l’élément sur lequel vous avez cliqué. Pour le rendre disponible dans le rappel setTimeout , vous devez lui affecter une variable locale afin qu’il soit enregistré lors de la fermeture.

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

METTRE À JOUR:

Il n’y a pas besoin de tableau. Cette version suppose simplement que les images du diaporama se trouvent dans la même position que les TD contenant les vignettes correspondantes et utilise .eq() pour les rechercher.

 $("#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); });

DEMO

La raison $(this) laquelle $(this) n’a pas été définie auparavant est parce que vous aviez .thumbnails , et je l’ai copié, mais il devrait s’agir de #thumbnails . Le sélecteur ne correspond donc pas aux éléments.

Vous pouvez utiliser les sélecteurs jQuery. Dans ce cas, vous utiliserez le ‘descendant d’ancêtre’ ( http://api.jquery.com/descendant-selector/ ) – Sélectionne tous les éléments qui sont les descendants d’un ancêtre donné .

Ce:

 // Everything inside `.thumbnails` with tag `img` $('.thumbnails img')

HTML (exemple)

jQuery

 (function($){ $('.thumbnails img').on('click',function(e){ e.preventDefault(); // do sometinghttps://stackoverflow.com/questions/20808765/target-items-in-an-array-on-click/... }); })(jQuery);