![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
最近jQueryを勉強中でして、練習の意味で自分で以下のようなページを作ってみました。
【ページの内容】
犬、猫、鳥の画像ボタンを配置して、クリックすると各ボタンのalt属性をアラート表示する
【実際のhtml】
<div class="header">
<ul class="menu">
<li><a href="index.html" id="btn1"><img src="dog.png" alt="Dog"></a></li>
<li><a href="index.html" id="btn2"><img src="cat.png" alt="Cat"></a></li>
<li><a href="index.html" id="btn3"><img src="bird.png" alt="Bird"></a></li>
</ul>
</div>
【実際のscript】
$(function(){
var btn1 = $('#btn1');
var photo1 = btn1.find('img');
var name1 = photo1.attr('alt');
btn1.click(function(){
alert(name1);
});
var btn2 = $('#btn2');
var photo2 = btn2.find('img');
var name2 = photo2.attr('alt');
btn2.click(function(){
alert(name2);
});
var btn3 = $('#btn3');
var photo3 = btn3.find('img');
var name3 = photo3.attr('alt');
btn3.click(function(){
alert(name3);
});
});
上記で一応やりたいことは再現はできるのですが、scriptが冗長なのでもっと短くしたいです。
しかしどんなスクリプトにすればよいかわかりません。
宜しければアドバイスお願いいたします。
No.1ベストアンサー
- 回答日時:
同じHTML構造の要素に対する処理なので、固有の名称(idなど)を用いずに、クリックされた要素に対する位置関係や属性などを基に記述する方法にすれば、まとめることができると思います。
具体的な記述はいろいろあると思いますが、一例です。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>test</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.9. …
<script type="text/javascript">
$(function(){
$("ul.menu img").click(function(){
alert($(this).attr("alt"));
return false;
});
});
</script>
</head>
<body>
<div class="header">
<ul class="menu">
<li><a href="index.html"><img src="dog.png" alt="Dog"></a></li>
<li><a href="index.html"><img src="cat.png" alt="Cat"></a></li>
<li><a href="index.html"><img src="bird.png" alt="Bird"></a></li>
</ul>
</div>
</body>
</html>
さっそくのご回答ありがとうございます。
教えてくださったスクリプトで見事に動作しますね!
return文はまだ習得できていませんので、現時点のスレ主の実力では完全に理解できませんが今後の参考にさせていただきます。
非常に勉強になり助かりました。
また質問させていただく機会がありましたら宜しくお願いいたします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript javascriptで変数を組み込みたい 2 2023/01/13 09:52
- PHP 共通の処理をまとめる方法がわからないのでアドバイスお願いします。 1 2022/12/19 20:20
- HTML・CSS htmlについて質問です! 写真のように写真の部分が?になってしまいます。 ファイルもしっかり選べて 1 2023/07/09 21:17
- HTML・CSS CSSのホバーエフェクト 1 2023/06/19 06:53
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
[jQuery]bxSlider 一番最後と...
-
前回の質問の続き
-
MAX関数を使ってからLEFT JOIN...
-
jspでcssが読み込めない
-
1枚の画像をクリックすると複数...
-
フッター上部に謎の隙間
-
iframe内のリンクが飛ばないの...
-
MFCで画像を表示させているので...
-
表示・非表示のスクリプトで、...
-
getElementByIdの戻り値がnull...
-
appendChildでのデフォルト値
-
【javascript】ロールオーバー...
-
iframe内のリンク文字のマウス...
-
jQueryでのドラッグアンドドロ...
-
bxsliderで最初に縦に複数表示...
-
指定したフォルダの画像を一括...
-
JavaScript で flexslider の画...
-
「画像クリックで音声再生」を ...
-
画像の重なりの順序を代える方...
-
複数bxsliderをタブで切り替え...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Slick.jsのオプションrtlについて
-
同一ページ内の複数のタグに同...
-
【jQuery】2分割レイアウトで、...
-
キャラクターがぴょこんと飛び...
-
画像をフェードアウト&フェー...
-
jqueryのプラグインslickの画像...
-
html5に変えるとスライドショー...
-
Javaスクリプトで画像を縦にス...
-
high slideをFC2ブログで
-
ご教授ください。
-
jQueryでタブ、スライダーを使...
-
チェックボックスと画像切替の連動
-
jQueryのclickイベントハンドラ
-
javascriptで文字サイズの変更
-
fontsize.jsでhtmlの大中小の設...
-
【iOS及びAndroid】リンク画像...
-
Firefoxとクロームでフェードイ...
-
javascript src書き換え
-
神経衰弱 順番に裏返し
-
アコーディオンメニューが開い...
おすすめ情報