Question

请记住我是一个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

您可以为使用$(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);
});

更新：

不需要阵列。此版本假设幻灯片中的图像与包含相应缩略图的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 2

$('.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 3

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

这：

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

HTML（示例）

<ul class="thumbnails">
  <li><img src="..."></li>
  <li><img src="..."></li> 
  <li><img src="..."></li>
  <li><img src="..."></li>
</ul>

的jQuery

(function($){
  $('.thumbnails img').on('click',function(e){
     e.preventDefault();
     // do someting...
  });
})(jQuery);

点击数组中的目标项目？

3 个答案:

HTML（示例）

的jQuery