PCゲーマーのWebデザイン備忘録

PCゲーマーのWebデザイン備忘録。東京都内でWEBデザイナーとして働いています。Webデザインやゲームに関することをブログに書いていきます

【jQuery】 イベントで属性を操作する

イベントを使い属性の内容を変えます。
click()メソッドで、イベントを実行します。

実行例

ボタンで画像切り替え

ボタンが押されたときを切欠に画像切り替えを行います。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>click()イベント</title>
<script src="../../js/jquery-1.11.1.min.js"></script>
<style>
button{
  cursor: pointer;
}
</style>
</head>

<body>
<p><button>画像を変更</button></p>
<p><img src="flower.png" alt="花"></p>
<script>
$(function(){
$('button').click(function(){
	$('img').attr('src','sea.png').attr('alt','海');
});
});
</script>
</body>
</html>

結果:
f:id:game-web-design:20141014191107g:plain

 

リンクで画像切り替え

「return false;」でリンクを押したときのページ移動を無効にします。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>click()イベント</title>
<script src="../../js/jquery-1.11.1.min.js"></script>
<style>
button{
  cursor: pointer;
}
</style>
</head>

<body>
<p><a href="sea.png">画像を変更</a></p>
<p><img src="flower.jpg" alt="花"></p>
<script>
$(function(){
$('a').click(function(){
	$('img').attr('src','sea.jpg').attr('alt','海');
	return false;
});
});
</script>
</body>
</html>

結果:
f:id:game-web-design:20141014191813g:plain


 

リストから選んで画像切り替え

eq(n)を利用して、リンクを押して画像を切り替えることができます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>イベントが発生した要素を取得する</title>
<script src="../../js/jquery-1.11.1.min.js"></script>
</head>

<body>
<ul>
<li><a href="flower.png"></a></li>
<li><a href="sea.png"></a></li>
<li><a href="jellyfish.png">くらげ</a></li>
<li><a href="building.png">たてもの</a></li>
</ul>
<p><img src="flower.png" alt="花"></p>
<script>
$(function(){
$('a:eq(0)').click(function(){
	$('img').attr('src','flower.png').attr('alt','花');
	return false;
});
$('a:eq(1)').click(function(){
	$('img').attr('src','sea.png').attr('alt','海');
	return false;
});
$('a:eq(2)').click(function(){
	$('img').attr('src','jellyfish.png').attr('alt','くらげ');
	return false;
});
$('a:eq(3)').click(function(){
	$('img').attr('src','building.png').attr('alt','建物');
	return false;
});
});
</script>
</body>
</html>

結果:


 

$(this);を使って画像切り替え

上記のリストを$this();を使って簡略化。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>イベントが発生した要素を取得する</title>
<script src="../../js/jquery-1.11.1.min.js"></script>
</head>

<body>
<ul>
<li><a href="flower.png"></a></li>
<li><a href="sea.png"></a></li>
<li><a href="jellyfish.png">くらげ</a></li>
<li><a href="building.png">たてもの</a></li>
</ul>
<p><img src="flower.png" alt="花"></p>
<script>
$(function(){
$('a').click(function(){
	$('img').attr('src',$(this).attr('href')).attr('alt',$(this).text());
}).click(function(){
	return false;
});
});
</script>
</body>
</html>

結果:
押されたa要素の属性をattrで読み込み、img要素を置き換えています。


 

マウスポインタが画像の上にあるとき・離れたとき

mouseover();とmouseout();でポインターが乗っているときと乗っていないときの操作をします。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>イベントが発生した要素を取得する</title>
<script src="../../js/jquery-1.11.1.min.js"></script>
</head>

<body>
<p><img src="flower.png" alt="花"></p>
<script>
$(function(){
$('img').mouseover(function(){
	$(this).attr('src','sea.png').attr('alt','海');
}).mouseout(function(){
	$(this).attr('src','flower.png').attr('alt','花');
});
});
</script>
</body>
</html>

結果:

乗ったときと離れたときにそれぞれ画像を指定してあるので、両方の行動で画像切り替えが行われます。

 

画像クリックで切り替わる

toggleを使うのですが、toggleは今のjQueryからされているので、jquery-migrate-1.2.1を読み込ませて解決します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>イベントが発生した要素を取得する</title>
<script src="../../js/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<style>
#imgChange img{
  cursor: pointer;
}
</style>
</head>

<body>
<div id="container">
<p id="imgChange"><img src="flower.png"></p>
</div>

<script>
$(function(){
$('#imgChange').toggle(function(){
	$('img').attr('src','sea.png');
},function(){
	$('img').attr('src','flower.png');
},function(){
	$('img').attr('src','jellyfish.png');
},function(){
	$('img').attr('src','building.png');
});
});
</script>
</body>
</html>

結果: