Question

我正在创建一个图片库，我希望用户能够点击缩略图并显示更大的图像。

这是一个php代码，用于迭代服务器上某个目录中的所有图像并显示它们，并为每个图像赋予唯一的ID。

echo '<div id="image' . $i . '" class="image">' . $thumbsrc . '</div>';

echo '<div id="bigimage' . $i . '" class="bigimage">' . $imagesrc . '</div>';

这很好用，我用

$(".bigimage").hide();

隐藏更大的图片。

所以我现在能做的就是：

$("#image1").click(function() {
$("#bigimage1").show();
});

$("#bigimage1").click(function() {
$("#bigimage1").hide();
});

但我发现最多30张图片我不能写30个这样的实例所以我想循环它。

我试过

for (var i = 1; i < 30; i++) {
    $('#image' + i).click(function() {
        $('#bigimage' + i).show();
    });
    $('#bigimage' + i).click(function() {
         $('#bigimage' + i).hide();
    });
}

哪个似乎不起作用？为什么不呢？

如果我这样做

for (var i = 1; i < 10; i++) {
    $('#image' + i).append('<p>test' + i + '</p>');
}

它将段落附加到每个#image-element，因此循环选择器似乎有效。

我该怎么做？

事先谢谢。

Answer 1

这是因为您的所有点击处理程序都使用相同的值，为了了解发生的情况，您可以参考以下问题：Javascript infamous Loop issue?

由于您的元素有类，因此您可以使用类。 index方法返回集合中传递元素的索引。获取索引后，要选择其他集合中的相应元素，可以使用eq方法。

var $img = $('.image');
var $bigImg = $('.bigimage').hide();

$img.on('click', function() {
   var i = $img.index(this);
   $bigImg.eq(i).show();
});

$bigImg.on('click', function() {
   // this keyword refers to the clicked element
   $(this).hide();
});

使用jQuery迭代特定的CSS-id＆＃39; s

1 个答案: