如何通过单击图片加载图片图像？

Question

目前我为我的应用程序中的每张图片加载默认图像。如果我单击 div 5 的任何图片，我想加载 div 5 中所有图像的真实图片。目前我使用 img 标签的 onclick 事件：

switchImg(this, "LINK_FOR_PICTURE")

我的 js sn-p:

function switchImg(img, url){
  $(img).attr("src", url);
}

目前它只加载我点击的图片。

这里是 HTML sn-p:

<div id="1">
</div>

<div id="2">
</div>

..

<div id="5">

<img src="DEFAULT_IMG" onclick="switchImg(this, "LINK_FOR_PICTURE_1")" alt="No_picture">
</div>
<img src="DEFAULT_IMG" onclick="switchImg(this, "LINK_FOR_PICTURE_2")" alt="No_picture">
</div>
<img src="DEFAULT_IMG" onclick="switchImg(this, "LINK_FOR_PICTURE_3")" alt="No_picture">
</div>
.....

</div>

如果满足以下条件，我需要如何更改我的代码：

• 我单击 div id=5 中的任何图片，所有这些图片都会获得正确的图片链接（LINK_FOR_PICTURE_1、LINK_FOR_PICTURE_2 等）作为 src。其他 div 中的其他图片不改变，仍然显示默认 img。 （div id 5 是一个示例，对于其他带图片的 div 应该可以使用相同的过程）。

请记住，每张图片的 img 链接都会发生变化。

Answer 1

1. 只使用数字作为 id 是不好的做法
2. 您的 div id="5" 在第一张图片后立即关闭
3. 您在示例中使用双引号中的双引号 - 坏主意

4. 通过使用 this, "this" 调用 switchImg(this, "LINK_FOR_PICTURE_3") 仅代表点击的图像。你需要类似的东西

   function switchImg(img){
   
       $(img).closest('div').find('img').each(function(){
   
           $(this).attr("src", $(this).attr('imglink'));
   
       });
   
   }
   

使用html

<img src="DEFAULT_IMG" onclick="switchImg(this);" imglink="LINK_FOR_PICTURE_3" alt="No_picture">

Answer 2

利用 jQuery 和事件委托，观察 div 何时被单击，然后找到该 div 中的所有图像并触发 src 更改。为了更好地解释这一点，我很快在 JSFiddle 上整理了一个示例

http://jsfiddle.net/Phunky/EnhUE/

在我的示例中，您可以单独点击图片，也可以点击所有图片的 div。

Answer 3

这样就可以了：

HTML

<div id="5">
    <img src="DEFAULT_IMG" data-fullImg="link_for_picture1" alt="No_picture">
    <img src="DEFAULT_IMG" data-fullImg="link_for_picture1" alt="No_picture">
    <img src="DEFAULT_IMG" data-fullImg="link_for_picture1" alt="No_picture">
</div>

JS 函数 switchImg(img){ img.attr("src", img.data('fullImg')); }

$(function(){    
    var allImages = $('#5 img');

    allImages.click(function(){
        allImages.each(function(){
            switchImg($(this));
        });
    });
});

HTML 更改

• 我假设你想要所有的img 标签包裹在#5 中，不是吗？因为您当前的 HTML 标记无效。
• 此外，从技术上讲，ID 不能以数字开头。在大多数浏览器中它可能不会导致问题，但它是无效的。
• 我正在使用 HTML5 数据属性来存储图片的链接。这甚至可以在非 HTML5 浏览器中使用。我马上就会讲到这个。
• 最后，inline-JS 通常是个坏主意，因为它很难维护。使用 jQuery，很容易将代码绑定到 onclick 事件。

JS 更改

• allImages.click() 将里面的代码绑定到任意图片的点击事件。
• .each() 函数然后循环遍历所有这些图像，将自身作为 jquery 对象传递给 switchImg 函数。
• 我修改后的switchImg函数不需要第二个参数，因为它可以简单地使用jQuery对象来访问data-fullImg属性。如果使用 1.6 之前的 jQuery 版本（或类似的版本），以我的方式使用 .data() 方法将不起作用。您需要使用 .attr('data-fullImg')。

编辑

针对 OP 对此帖子的评论：

$(function(){
    $('img.showOriginal').click(function(){
        $(this).parent().children().each(function(){
            switchImg($(this));
        });
    });
});

此代码假定您将“showOriginal”类放在每个img 标记上，因为我怀疑您是否真的想将此功能应用于页面上的每个img 标记。除此之外，我们还有这部分：$(this).parent().children()。这只是将 DOM 遍历到父元素（#5、#2 等等），然后返回到所有子元素（您要更改的图像）。