jQuery onclick正文中的所有图像

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

我试图这样做，以便当用户点击我的网站上的任何图像时，将显示一个图库类型的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"); 

看看这个参考 。

请注意，大多数情况下，我们不会对较大的图像使用相同的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'); }); 

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

问题出在您的选择器上。 ‘>’选择器指定直接子 。 @dstroy建议的选择器只会抓取整个页面上的任何图像。 但是，这可能不是你想要完成的。

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

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

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