Изменить изображение в элементе Onclick

Question

У меня есть элемент href с изображением - и еще одна ссылка с изображением.

Я хочу поменять целевое изображение с изображением с указанной ссылки.

Цель:

<div class="mainPicture"> 
<img src="/img/0~7183AF0F-799A-4248-A9B0-848F038DE194~400~300~1" class="photo" alt="MC812-REF"> 
</div> 

Ссылки:

<li> 
    <a rel="colorboxRel1930551650" href="/img/0~C19CB486-F38E-4F27-999F-200B35EFB916~640~480~1" class="testColorbox cboxElement" onclick="return false;"> 
<img src="/img/0~C19CB486-F38E-4F27-999F-200B35EFB916~70~70~1" alt="Närbild" title="Närbild"> 
</a> 
</li> 

<li> 
<a rel="colorboxRel1930551650" href="/img/0~E1E5892F-0A22-4DA0-A9F8-3A93C4461125~640~480~1" class="testColorbox cboxElement" onclick="return false;">  
<img src="/img/0~E1E5892F-0A22-4DA0-A9F8-3A93C4461125~70~70~1" alt="Höger vinkel" title="Höger vinkel"> 
</a> 
</li> 

Как сделать это с помощью JQuery или ванильным Js?

Answer 1

$("a").on("click", function() { 
    $(this).siblings("img").first().attr("src", this.getAttribute("href")); 
}); 

Pure JS

document.addEventListener("DOMContentLoaded", function() { 
    var links = document.getElementsByTagName("a"); 

    for (var i = 0; i < links.length; i++) { 
    links[i].addEventListener("click", function(e) { 
     e.preventDefault(); 

     this.firstElementChild.setAttribute("src", this.getAttribute("href")); 
    }); 
    } 
}); 

Answer 2

Вы можете использовать метод JQuery .attr()

$("li a").click(function(){ 
     $(".mainPicture img").attr("src", $("img", this).attr("src")); 
    }); 

Документация: http://api.jquery.com/attr/

Answer 3

Во-первых, давайте дадим цель на идентификатор для более легкого использования в ваниле JS:

<div class="mainPicture"> 
    <img id="targetImg" src="/img/0~7183AF0F-799A-4248-A9B0-848F038DE194~400~300~1" class="photo" alt="MC812-REF"> 
</div> 

Вы могли бы использовать:

<li> 
    <a rel="colorboxRel1930551650" href="/img/0~C19CB486-F38E-4F27-999F-200B35EFB916~640~480~1" class="testColorbox cboxElement" onclick="document.getElementById('targetImg').src = this.childNodes[0].src; return false;"> 
     <img src="/img/0~C19CB486-F38E-4F27-999F-200B35EFB916~70~70~1" alt="Närbild" title="Närbild"> 
    </a> 
</li> 

<li> 
    <a rel="colorboxRel1930551650" href="/img/0~E1E5892F-0A22-4DA0-A9F8-3A93C4461125~640~480~1" class="testColorbox cboxElement" onclick="document.getElementById('targetImg').src = this.childNodes[0].src; return false;">  
     <img src="/img/0~E1E5892F-0A22-4DA0-A9F8-3A93C4461125~70~70~1" alt="Höger vinkel" title="Höger vinkel"> 
    </a> 
</li> 

... Но я не знаю, как ваши href и rel атрибуты должны работать там.

Для решения JQuery, вероятно, было бы лучше оставить в покое onclick и использовать этот JavaScript код:

$(function() { 
    $("a.testColorbox.cboxElement").click(function() { 
     $(".mainPicture img").attr("src", $("img", this).attr("src")); 
    }); 
});