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。

请注意，大多数情况下，我们不会对较大的图片使用相同的网址，因为这意味着要为缩略图加载大图片。我的做法是有一个命名模式，如“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);
});

Answer 3

问题在于您的选择器。 '＆gt;' selector指定直接子<body><img /></body>。 @dstroy建议的选择器只会抓取整个页面上的任何图像。但是，这可能不是您想要实现的目标。

我假设你有一些表单元素（让我们假设一个ID为'gallery'的DIV），其中包含你感兴趣的所有图像。然后你可以使用

var images = $("#gallery img");

这样，图标和'chrome'图像将不会显示在背景上。

jQuery onclick正文中的所有图像

3 个答案: