【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>
結果:
リンクで画像切り替え
「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>
結果:
リストから選んで画像切り替え
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>
結果: