Изменение источника изображения с помощью jQuery

Question

Мой DOM выглядит так:

<div id="d1">
   <div class="c1">
            <a href="#"><img src="img1_on.gif"></a>
            <a href="#"><img src="img2_on.gif"></a>
   </div>
</div>

Когда кто-то нажимает на изображение, я хочу, чтобы src изображения изменился на <img src="imgx_off.gif">, где x представляет изображение № 1 или 2.

Возможно ли это, или мне нужно использовать CSS для изменения изображений?

Answer 1

У меня сегодня такое же чудо, я поступил так:

//<img src="actual.png" alt="myImage" class=myClass>
$('.myClass').attr('src','').promise().done(function() {
$(this).attr('src','img/new.png');  
});

Answer 2

Вы должны добавить атрибут id в тег изображения, например:

<div id="d1">
   <div class="c1">
            <a href="#"><img id="img1" src="img1_on.gif"></a>
            <a href="#"><img id="img2" src="img2_on.gif"></a>
   </div>
</div>

, затем вы можете использовать этот код для изменения источника изображений:

 $(document).ready(function () {
        doSomething();
        $("#img1").attr({ "src": "logo-ex-7.png" });
        $("#img2").attr({ "src": "logo-ex-8.png" });
    });

Answer 3

Просто дополнение, чтобы сделать его еще более крошечным:

$('#imgId').click(function(){
    $(this).attr("src",$(this).attr('src') == 'img1_on.gif' ? 'img1_off.gif':'img1_on.gif');
});

Answer 4

Нет способа изменить источник изображения с помощью CSS.

Единственно возможным способом является использование Javascript или любой Javascript библиотеки, такой как jQuery .

1011 * логическая единица * Изображения находятся внутри div, и с этим изображением нет class или id. Таким образом, логика будет выбирать элементы внутри div, где расположены изображения. Затем выберите все элементы изображений с помощью цикла и измените изображение src с помощью Javascript / jQuery . Пример кода с демонстрационным выходом-

$(document).ready(function()
{
    $("button").click(function()
    {
      $("#d1 .c1 a").each(function()
      {
          $(this).children('img').attr('src', 'https://www.gravatar.com/avatar/e56672acdbce5d9eda58a178ade59ffe');
      });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<div id="d1">
   <div class="c1">
            <a href="#"><img src="img1_on.gif"></a>
            <a href="#"><img src="img2_on.gif"></a>
   </div>
</div>

<button>Change The Images</button>