javascript - 使用 jQuery 迭代特定的 CSS-id

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