Какой самый быстрый способ переключения изображений по классу

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

Вызовите эту функцию JavaScript

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

Answer 3

Это самый простой способ:

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

Похоже, вы, возможно, неправильно используете тег изображения.Если изображения предназначены только для дизайна / макета, то вам лучше использовать background-images.В каком контексте вы используете их?