Question

我有一个图像列表

<img class="onOff" src="/Content/Images/on.png" /> 
<img class="onOff" src="/Content/Images/on.png" /> 
<img class="onOff" src="/Content/Images/on.png" /> 
<img class="onOff" src="/Content/Images/on.png" /> 
<img class="onOff" src="/Content/Images/on.png" />

我想改变所有图像的来源（通过使用类选择器.onOff，所以上面的每个图像都改为：

<img class="onOff" src="/Content/Images/off.png" />

通过jquery更改所有这些图像的最有效方法是什么？

Answer 1

使用标记

作为类选择器的前缀

$('img.onOff').attr('src', '/Content/Images/off.png');

但是，如果您有一些上下文（例如容器div），您也可以添加它以提高性能：

 $('img.onOff', '#containerDiv').attr('src', '/Content/Images/off.png');

如果只是为了更改图像，请查看CSS Sprites。

Answer 2

这是最简单的方法：

$('.onOff').attr('src', function(src) {
    return src == '/Content/Images/off.png' ? '/Content/Images/on.png' : src;
});

看起来您可能会滥用图片代码。如果图像仅用于设计/布局，那么您最好使用背景图像。您在上下文中使用了哪些内容？

Answer 3

调用此javascript函数

    function changeImage() {
        $(".onOff").each(
            function()
            {
                $(this).attr("src","/Content/Images/off.png");
            }
        );
    }

什么是按类切换图像的最快方法

3 个答案: