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

<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 o r 2.

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

Вы можете использовать тег затем не обращайте внимания на первый индекс функция. Например, если ваше img jQuery с атрибутом 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');
    }
});

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

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

, чтобы делать вещи после загрузки изображения. .load() Причина редактирования:

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

});

https://stackoverflow.com/a/670433/561545 Для получения дополнительной информации. Я пытаюсь установить атрибут src с помощью метода attr в jquery для изображения объявления, используя синтаксис, например:

Это решение полезно, и оно работает, но если изменить путь, измените также путь к изображению и не работайте. $("#myid").attr('src', '/images/sample.gif');

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

Решение состоит в том, чтобы поставить » в начале пути:

Этот трюк очень полезен для меня, и я надеюсь, что он полезен для других. $("#myid").attr('src', 'images/sample.gif');

, поэтому при нажатии на изображение оно поворачивается по всем изображениям в вашем HTML (в вашем

Я покажу вам, как изменить изображение src id и d1 или нескольких изображениях c1 специально) .. есть ли у вас 2 в вашем HTML. Полный код { *} Разбивка

Javascript — Связь между вкладками или окнами — Переполнение стека

Полный код

$(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();

    });
});

Разбивка

  1. Создайте копию ссылок, содержащих изображения (примечание: вы также можете использовать атрибут href ссылок для дополнительной функциональности … например отображать рабочую ссылку под каждым изображением ):

        var $images = $("#d1 > .c1 > a").clone();  ;
    
  2. Проверить сколько изображений было в HTML и создать переменную для отслеживания того, какое изображение отображается:

    var $length = $images.length;
    var $imgShow = 0;
    
  3. available only Или, для безопасной для порядка версии, используйте объект для хранения всех ранее увиденных значений и проверяйте значения перед этим перед добавлением в массив.

    $("#d1 > .c1").html( $("#d1 > .c1 > a:first") ); 
    
  4. Привязать функцию для обработки при нажатии на ссылку изображения.

        $("#d1 > .c1 > a").click(function(event) { 
            $(this).children().attr("src", $("img", $images).eq(  $imgShow % $length).attr("src") );
            event.preventDefault();
        });
    

    В основе приведенного выше кода используется $imgShow % $length для циклического перемещения по объекту jQuery, содержащему объект images. $imgShow % $length, результат — это символ, который будет разрешен в приведенном выше регулярном выражении. 0length-1 MDN {* } Показывает, что если нам нужно несколько аргументов для функции, нам нужны круглые скобки, а если мы хотим написать более одного выражения, нам нужны фигурные скобки, и явный $images. Это означает, что этот код будет работать с 2, 3, 5, 10 или 100 изображениями … циклически проходя по каждому изображению по порядку и перезапуская первое изображение после достижения последнего изображения.

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


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

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

ЕСЛИ есть не только 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>

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

<img id="dummyimage" src="http://dummyimage.com/450x255/" alt="javascript - изменение источника изображения с помощью jQuery" />
<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;
        }
    });
});

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

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

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

У меня возникла та же проблема при попытке вызвать кнопку re captcha. После некоторого поиска, теперь функция ниже работает нормально почти во всех известных браузерах (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 перерисовывать изображение.

У меня сегодня такое же чудо, которое я сделал следующим образом:

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

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

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

Изменить источник изображения с помощью элемента 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);
        }
    });

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

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

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

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

Logic-

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

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

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

. Вы должны добавить атрибут 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" });
    });