点击数组中的目标项目？

请记住，我是一个javascript / jquery / stackoverflow新手。 我有一个JQuery对象数组（每个对象都是一个图像）。 现在我为数组中的每个项目都有一个单独的函数：

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

换句话说，我为数组中的5个索引中的每个索引都有上面的代码。 我怎么写这个，以便我可以使用一个函数而不是六个函数来定位点击的照片？ 因此，具体而言，不是“图像[1]”，我只能说“图像[i]”。

这是这个实时版本的链接：

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

Answer 1

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

另外我认为你可以使用回调代替setTimeout

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

Answer 2

您可以为使用$(this)引用所单击元素的所有图像编写常规单击处理程序。 要使它在setTimeout回调中可用，您需要为其设置一个局部变量，因此它将保存在闭包中。

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

更新：

不需要arrays。 此版本假设幻灯片中的图像与包含相应缩略图的TD位于相同的位置，并使用.eq()来查找它们。

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

之前没有设置$(this)的原因是因为你有.thumbnails ，我复制了它，但它应该是#thumbnails 。 因此选择器与元素不匹配。

Answer 3

您可以使用jQuery 选择器 。 在这种情况下，您将使用’ancestor descendant’（ http://api.jquery.com/descendant-selector/ ） – 选择作为给定祖先后代的所有元素 。

这个：

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

HTML（示例）

jQuery的

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