jQuery onclick 正文中的所有图像

Question

英语不是我的母语，所以请耐心等待。

我试图做到这一点，以便当用户单击我网站上的任何图像时，画廊类型的 div 将变得可见，其中包含最大尺寸的图像。

我现在所做的方式是；

    var image = $("body > image");


image.on('click', function(){
    var imageURL = $(this).attr('src');
    backgroundCurtain.css({"display": "block"});
    imageResized.attr("src", imageURL);
    var imageWidth = imageResized.width();
    pictureInner.css({"width" : imageWidth});
}); 

这不起作用，说实话我没想到它会起作用。我如何调用它，以便体内的每个图像元素。如何“调用”体内的每个图像？

Answer 1

要使用 jquery 引用所有图像，只需执行

var images = $("img");

不过，通常您不希望将其应用于所有图像(例如 imageResized 不应该在此集合中)。一个好的解决方案是向您想要可缩放的元素添加一个 css 类(例如 class="zoomable")并使用此选择器:

var images = $("img.zoomable");

看看this reference .

请注意，大多数时候，我们不会对较大图像使用相同的 URL，因为这意味着要为缩略图加载大图像。我的做法是采用“someFile.jpg”和“someFile-big.jpg”这样的命名模式，并执行此类操作:

$("img.zoomable").on('click', function(){
    var imageURL = $(this).attr('src');
    backgroundCurtain.css({"display": "block"});
    imageResized.onload = function(){
        var imageWidth = imageResized.width();
        pictureInner.css({"width" : imageWidth});
    };
    imageResized.attr("src", imageURL.split('.')[0]+'-big.jpg');
});