Javascript 迭代特定CSS id'；使用jQuery

我正在制作一个图像库，我希望用户能够点击缩略图，并获得更大的图像显示

这是php代码，用于迭代服务器上目录中的所有图像，并显示它们，并为每个图像提供唯一的id

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

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

隐藏更大的图像

所以我现在能做的是：

$("#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（变量i=1；i<30；i++）{
$（“#图像”+i）。单击（函数（）{
$（'#bigimage'+i）.show（）；
});
$（“#bigimage”+i）。单击（函数（）{
$（'#bigimage'+i）.hide（）；
});
}

哪个好像不起作用？为什么不呢

如果我这样做

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

for（变量i=1；i<10；i++）{
$（'#image'+i）.append（'test'+i+'
'）；
}

它将段落附加到每个#图像元素中，这样循环选择器似乎可以工作

我该怎么做

---

事先谢谢。

这是因为所有单击处理程序都使用相同的值，要了解发生了什么，可以参考以下问题：

因为元素有类，所以可以改用类

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

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