Question

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

switchImg(this, "LINK_FOR_PICTURE")

my js snippet：

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

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

此处为HTML代码段：

<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

这样做：

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 function 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浏览器中使用。我马上就会谈到这一点。
最后，内联JS通常是一个坏主意，因为它很难维护。使用jQuery，将代码绑定到onclick事件非常容易。

JS更改

allImages.click()将内部代码绑定到任何图片上的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，无论如何），然后返回到所有子元素（您想要更改的图像）。

Answer 2

仅使用id作为不良做法
你的div id =“5”在第一张图片后立即关闭
您在示例中使用双引号双引号 - 糟糕的主意

通过使用此方法调用switchImg（this，“LINK_FOR_PICTURE_3”），“this” 仅代表点击的图片。你需要像

这样的东西

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 3

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

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

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

如何通过点击图片加载图片图片？

3 个答案: