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

时间:2011-06-02 09:56:11

标签: jquery image

我有一个图像列表

<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更改所有这些图像的最有效方法是什么?

3 个答案:

答案 0 :(得分:5)

使用标记

作为类选择器的前缀
$('img.onOff').attr('src', '/Content/Images/off.png');

但是,如果您有一些上下文(例如容器div),您也可以添加它以提高性能:

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

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

答案 1 :(得分:0)

这是最简单的方法:

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

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

答案 2 :(得分:0)

调用此javascript函数

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