jQueryで画像のsrcを取得したり、設定したりする方法

Webデザイン入門オンライン講座 Udemy

jQueryで画像のsrc取得

例えば、こんなhtmlソースがあったとして、

<div id="sample_img">
 <img src="sample.jpg">
</div>

画像を囲む要素（ここでは、div）をクリックしたら、その画像srcを取得するような場合、

<script>
$(document).ready(function(){
	$("#sample_img").click(function(){
		var src = $(this).children('img').attr('src');
                console.log(src);
	});
});
</script>

こんな風に書いてあげれば、画像のファイル名（URL）が表示されるはずです。

取得した画像のsrcを別の要素に追加する

少し追うようになりますが、取得した画像srcを別の要素に追加し、表示させるようなこともできます。

使い道としては、画像をクリックしたら、modal内の要素にそのクリックした画像を表示させるような感じがありますね。

jQueryでは、LightBoxっていう便利な画像のモーダル表示プラグインがありますが、これを使う際に、活用したりしますね。

具体的な書き方としては（モーダルとかだとわかりづらくなってしまうので、簡単な例で）、

<div id="sample_img">
 <img src="sample.jpg">
</div>

<div id="translate">
 <img src="" id="translate-img">
</div>

<script>
$(document).ready(function(){
	$("#sample_img").click(function(){
		var src = $(this).children('img').attr('src');
               $("#translate-img").attr("src",src);
		return false; 
	});
});
</script>

これで、クリックした画像のsrcを、id=”translate-img”のimgタグのsrcに設定でき、そちらにも表示されるっていうことになりますね。