jQuery的的onclick身体的所有图片(jQuery onclick all images i

英心不是我的母语，以便和我一起承担。

我试着让这个当用户点击任何图像在我的网站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");

看看这个参考。

需要注意的是大部分的时间，我们没有使用相同的网址较大的图像，因为这将意味着已预装了缩略图大图像。我的做法是，像“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');
});

Answer 2:

var image = $("img");

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