Заменить атрибут img src from elements

Question

Если у меня есть этот HTML на моей странице

<img src="samesrc" class="commentimg" name="differentimg1"/>

Как по щелчку я могу переключать src= из <img> с атрибутом name=, поэтому, когда я нажимаю <img>, src становится difftimg1 , и применяется другой класс

<img src="differentimg1" class="commentimg commentimgresize" name="differentimg1"/>

и затем при повторном нажатии источник HTML возвращается в исходное состояние, т.е.

<img src="samesrc" class="commentimg" name="differentimg1"/>

Это должно применяться ко всем изображениям, но src при переключении должен соответствовать значению элемента name=.

Я ПРОБОВАЛ http://jsfiddle.net/yusaf/zy5j8/25/

$('.imgreplace').each(function(){
$('.imgreplace').click(function(){
    var replacesrc = $(".commentimg").attr("name");
    $('.commentimg').attr("src", "+replacesrc+");
    $('.commentimg').toggleClass('commentimgresize')
})
});

Answer 1

Это работает

$('.commentimg').click(function(){
    var a = $(this).attr('src');
    var b = $(this).attr('name');
    $(this).attr('src',b).attr('name', a);
});

Пример: http://jsfiddle.net/jasongennaro/zy5j8/26/

Объяснение: Onclick захватить атрибуты src и name, повернуть их вспять.

Answer 2

$('.commentimg').click(function(){
    var replacesrc = $(this).attr("name");
    $(this).attr("src", replacesrc).toggleClass('commentimgresize');
});

Answer 3

Таким образом, при щелчке сделайте src = name, если они не равны, и в этом случае установите src обратно в исходное состояние.Хитрость будет заключаться в том, чтобы вспомнить, какой был первоначальный источник;функция данных, которая позволяет вам хранить произвольные данные в элементе по ключу, может помочь вам в этом.

$(".imgreplace").click(function() {
    if (this.attr("src") !== this.attr("name")) {
       this.data("oldsrc", this.attr("src"));
       this.attr("src", this.attr("name"));
    } else
       this.attr("src", this.data("oldsrc"));
    this.toggleClass('commentimgresize');
});

Answer 4

вы не можете добавить такую ​​переменную, попробуйте:

var replacesrc = $(".commentimg").attr("name");
$('.commentimg').attr("src", replacesrc);

Кроме того, использование URL-адреса в качестве имени, вероятно, не лучшая идея.

Answer 5

Использование name для URL неверно (например, Google запутается).

Вместо этого попробуйте использовать атрибут data-, например:

<img
  src="url1" 
  class="commentimg"
  data-src2="url2"/>

$('.commentimg').click(function(){
    var temp_src = $(this).attr('data-src2');
    $(this)
        .attr('data-src2', $(this).attr('src'))
        .attr('src', temp_src)
        .toggleClass('commentimgresize');
});

Посмотрите, как это работает здесь .