要素内の画像を変更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")); 
}); 

ピュア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

まずは、簡単に使用するためのターゲットにIDを与えてみましょうバニラ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")); 
    }); 
});