我正在制作一个图片库，我希望用户能够单击缩略图并显示更大的图像。
这是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中，因此循环选择器似乎可以工作。
我该怎么做呢?
事先谢谢。
这是因为你所有的点击处理程序使用相同的值，为了理解发生了什么，你可以参考这个问题:Javascript臭名昭著的循环问题?
因为你的元素有类，你可以用你的类来代替。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();
});