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

764

Моя 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>

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

Это возможно, или я должен использовать CSS, чтобы изменить изображения?

javascript jquery image

— user67033
источник

Если вы хотите что-то с помощью jQuery, вы можете посмотреть плагин jQuery Cycle, демо scrollRight (нижний правый пример)

— TomHastjarjanto

43

jQuery ("# my_image"). attr ("src", "first.jpg")

— manish nautiyal

9

Вы должны действительно принять ответ Джонстона :) Количество положительных отзывов как на вопрос, так и на ответ указывает на то, что многие сталкивались с этим. Это улучшило бы вопрос, чтобы иметь принятый ответ.

— Xcelled

4

До даты, т. 19th July, 2016 15:39 PMЕ. Количество ответов на вопрос 369 и @jonstjohn Количество ответов на вопрос 931 . Но такая неудача, @OP не вошел в систему после Feb 17 '09 at 2:57. :(И, @jonstjohn Отвечать Остаться неотмеченным .

— Нана Партикар

@Xcelled, единственная проблема в том, что ответ Джонстджона не отвечает на вопрос. Это незначительное замечание, но его стоит сделать. Взгляните на ответ Инко, так как он единственный, кто действительно правильно отвечает на вопрос.

— Дэвид Ньюкомб

1687

Вы можете использовать функцию attr () в jQuery . Например, если ваш imgтег имеет idатрибут «my_image», вы должны сделать это:

<img id="my_image" src="first.jpg"/>

Затем вы можете изменить srcизображение с помощью jQuery следующим образом:

$("#my_image").attr("src","second.jpg");

Чтобы прикрепить это к clickсобытию, вы можете написать:

$('#my_image').on({
    'click': function(){
        $('#my_image').attr('src','second.jpg');
    }
});

Чтобы повернуть изображение, вы можете сделать это:

$('img').on({
    'click': function() {
         var src = ($(this).attr('src') === 'img1_on.jpg')
            ? 'img2_on.jpg'
            : 'img1_on.jpg';
         $(this).attr('src', src);
    }
});

— jonstjohn
источник

79

Одна из распространенных ошибок, которые люди совершают, когда смена источника изображения не ждет загрузки изображения, чтобы выполнить последующие действия, такие как изменение размера изображения и т. Д. Вам нужно будет использовать .load()метод jQuery, чтобы делать вещи после загрузки изображения.

$('yourimageselector').attr('src', 'newsrc').load(function(){
    this.width;   // Note: $(this).width() will not work for in memory images

});

Причина редактирования: https://stackoverflow.com/a/670433/561545

— Мохсен
источник

Да. Это наконец добилось цели. .destroy () не заходит достаточно далеко. Обнуление всего HTML и затем снова init фактически работает при обмене изображениями различных размеров и тому подобным.

— Мэтт Дж.

обратите внимание, что загрузка не будет срабатывать надежно, особенно если изображение находится в кеше. Смотрите документацию по jQuery.

— Twilite

19

За дополнительной информацией. Я пытаюсь установить атрибут src с помощью метода attr в jquery для изображения объявления, используя синтаксис, например:$("#myid").attr('src', '/images/sample.gif');

Это решение полезно, и оно работает, но если изменить путь, измените также путь к изображению и не работайте.

Я искал решение этой проблемы, но ничего не нашел.

Решение состоит в том, чтобы поставить '\' в начале пути: $("#myid").attr('src', '\images/sample.gif');

Этот трюк очень полезен для меня, и я надеюсь, что он полезен для других.

— wphonestudio
источник

18

ЕСЛИ есть не только jQuery или другие среды для уничтожения ресурсов - каждый по одному килобайту для загрузки каждый раз по одному килобайту просто для простого трюка - но и нативный JavaScript (!):

<img src="img1_on.jpg" 
    onclick="this.src=this.src.match(/_on/)?'img1_off.jpg':'img1_on.jpg';">
<img src="img2_on.jpg" 
    onclick="this.src=this.src.match(/_on/)?'img2_off.jpg':'img2_on.jpg';">

Это можно записать в общем и более элегантно:

<html>
<head>
<script>
function switchImg(img){
    img.src = img.src.match(/_on/) ? 
        img.src.replace(/_on/, "_off") : 
        img.src.replace(/_off/, "_on");
}
</script>
</head>
<body>
    <img src="img1_on.jpg" onclick="switchImg(this)">
    <img src="img2_on.jpg" onclick="switchImg(this)">
</body>
</html>

— ИНКО
источник

Меня всегда удивляет, как много людей не могут прочитать вопрос и дать запрошенный ответ. Мне (и вам) показалось очевидным, что этот вопрос ищет общего решения, поэтому ОП привел 2 примера. И все же, казалось, все остальные не только полностью упустили это, но и дали ответ, который даже не ответил на вопрос. :(

— Дэвид Ньюкомб

17

Я покажу вам, как изменить изображение src, чтобы при нажатии на изображение оно вращалось по всем изображениям в вашем HTML (в частности, в вашем d1идентификаторе и c1классе) ... независимо от того, есть ли у вас 2 или более изображений в вашем HTML ,

Я также покажу вам, как очистить страницу после того, как документ будет готов, чтобы изначально отображалось только одно изображение.

Полный код

$(function() {

    var $images = $("#d1 > .c1 > a").clone();  

    var $length = $images.length;
    var $imgShow = 0;

    $("#d1 > .c1").html( $("#d1 > .c1 > a:first") );  

    $("#d1 > .c1 > a").click(function(event) { 

        $(this).children().attr("src", 
                        $("img", $images).eq(++$imgShow % $length).attr("src") );
        event.preventDefault();

    });
});

Поломка

Создайте копию ссылок, содержащих изображения (примечание: вы также можете использовать атрибут href ссылок для дополнительной функциональности ... например, отобразить рабочую ссылку под каждым изображением ):
```
    var $images = $("#d1 > .c1 > a").clone();  ;
```
Проверьте, сколько изображений было в HTML, и создайте переменную, чтобы отслеживать, какое изображение отображается:
```
var $length = $images.length;
var $imgShow = 0;
```
Измените HTML документа, чтобы отображалось только первое изображение. Удалите все остальные изображения.
```
$("#d1 > .c1").html( $("#d1 > .c1 > a:first") ); 
```
Привязать функцию для обработки при нажатии на ссылку изображения.
```
    $("#d1 > .c1 > a").click(function(event) { 
        $(this).children().attr("src", $("img", $images).eq(++$imgShow % $length).attr("src") );
        event.preventDefault();
    });
```
Сердце приведенного выше кода используется ++$imgShow % $lengthдля циклического перемещения по объекту jQuery, содержащему изображения. ++$imgShow % $lengthсначала увеличивает наш счетчик на единицу, затем он изменяет это число на количество изображений. Это будет держать результирующий индекс циклически от 0до length-1, которые являются индексами $imagesобъекта. Это означает, что этот код будет работать с 2, 3, 5, 10 или 100 изображениями ... циклически просматривая каждое изображение по порядку и перезапуская первое изображение, когда будет получено последнее изображение.

Кроме того, .attr()используется для получения и установки атрибута "src" изображений. Чтобы выбрать элементы среди $imagesобъекта, я установил $imagesв качестве контекста jQuery форму $(selector, context). Затем я использую, .eq()чтобы выбрать только элемент с конкретным индексом, который меня интересует.

Пример jsFiddle с 3 изображениями

Вы также можете хранить srcs в массиве.
Пример jsFiddle с 3 изображениями

А вот как включить hrefs из тегов привязки вокруг изображений:
пример jsFiddle

— Петр Айтай
источник

17

Надеюсь, что это может работать

<img id="dummyimage" src="http://dummyimage.com/450x255/" alt="" />
<button id="changeSize">Change Size</button>

$(document).ready(function() {
    var flag = 0;
    $("button#changeSize").click(function() {
        if (flag == 0) {
            $("#dummyimage").attr("src", "http://dummyimage.com/250x155/");
            flag = 1;
        } else if (flag == 1) {
            $("#dummyimage").attr("src", "http://dummyimage.com/450x255/");
            flag = 0;
        }
    });
});

— Zeeshan
источник

Хотя этот фрагмент кода может решить вопрос, в том числе объяснение действительно помогает улучшить качество вашего сообщения. Помните, что вы отвечаете на вопрос читателей в будущем, и эти люди могут не знать причин, по которым вы предлагаете код.

— Дерек Браун

Спасибо Дерек будет держать эту вещь в моей памяти со следующего раза

— Zeeshan

14

Вы должны добавить атрибут 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 () {
        $("#img1").attr({ "src": "logo-ex-7.png" });
        $("#img2").attr({ "src": "logo-ex-8.png" });
    });

— Мистер битмап
источник

9

Вы также можете сделать это с помощью jQuery следующим образом:

$(".c1 img").click(function(){
     $(this).attr('src','/new/image/src.jpg');   
});

Вы можете иметь условие, если есть несколько состояний для источника изображения.

— FernandoEscher
источник

5

этот синтаксис неверен. функция jquery attr () принимает 1 или 2 параметра. Первая - это строка с именем атрибута HTML, вторая - значение для этого атрибута, который вы хотите установить.

— Тьяго Силва

7

У меня была такая же проблема при попытке вызвать кнопку повторного ввода кода. После некоторого поиска, теперь приведенная ниже функция прекрасно работает практически во всех известных браузерах (chrome, Firefox, IE, Edge, ...):

function recaptcha(theUrl) {
  $.get(theUrl, function(data, status){});
  $("#captcha-img").attr('src', "");
  setTimeout(function(){
       $("#captcha-img").attr('src', "captcha?"+new Date().getTime());
  }, 0);
 }

«theUrl» используется для рендеринга нового изображения капчи и может быть проигнорировано в вашем случае. Наиболее важным моментом является создание нового URL, который заставляет FF и IE перерисовывать изображение.

— Кайван Техрани
источник

7

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

элемент:

    <img class="letstalk btn"  src="images/chatbuble.png" />

код:

    $(".letstalk").click(function(){
        var newsrc;
        if($(this).attr("src")=="/images/chatbuble.png")
        {
            newsrc="/images/closechat.png";
            $(this).attr("src", newsrc);
        }
        else
        {
            newsrc="/images/chatbuble.png";
            $(this).attr("src", newsrc);
        }
    });

— Абхиджит Пуджари
источник

7

Если вы обновляете изображение несколько раз, и оно получает CACHED и не обновляется, добавьте случайную строку в конце:

// update image in dom
$('#target').attr('src', 'https://example.com/img.jpg?rand=' + Math.random());

— kintsukuroi
источник

1

Это очень важно, по крайней мере для меня, добавить случайную строку в конце! Танки!

— Марсело Садер

3

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

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

— Anyone_ph
источник

3

Это гарантированный способ сделать это в Vanilla (или просто Pure) JavaScript:

var picurl = 'pictures/apple.png';
document.getElementById("image_id").src=picurl;

— Раймонд Вачага
источник

1

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

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

— Сэль Лахос
источник

-1

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

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

логическая единица

Изображения находятся внутри div и отсутствуют classили idс этим изображением.

Таким образом, логика будет выбирать элементы внутри, divгде расположены изображения.

Затем выберите все элементы изображений с помощью цикла и измените изображение с помощью 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>

Развернуть фрагмент

— Абрар Джахин
источник