最近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でタブ、スライダーを使...
-
以前、ロールオーバー効果につ...
-
Slick.jsのオプションrtlについて
-
Javascriptで画像のフェードイン
-
画像をフェードアウト&フェー...
-
HTML5 footer 固定の仕方
-
MAX関数を使ってからLEFT JOIN...
-
eclipseでcssを使うためには?
-
jqueryのsortableで一部ソート...
-
【CSS】floatで左右に並べた...
-
Vb.net2005での画像の合成方法
-
CSS <div>の入れ子が反映さ...
-
JavaScriptで変更した属性の元...
-
コンテンツの移動方法について
-
textareaで入力した文字を改行...
-
読み込んだQRコードをフォーム...
-
画像の下に説明文をつけて切り...
-
背景色を一定時間ごとにランダ...
-
this.src等のthisについて
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Slick.jsのオプションrtlについて
-
キャラクターがぴょこんと飛び...
-
【jQuery】2分割レイアウトで、...
-
スライドショー「Skitter」をカ...
-
スライドショーの画像にリンク...
-
画像をフェードアウト&フェー...
-
Dreamweaver上とデバイスプレビ...
-
アコーディオンメニューが開い...
-
神経衰弱 順番に裏返し
-
楽天APIのデータをjqueryのgetJ...
-
swiper.jsについて
-
エンドロールを枠の中で表示す...
-
順番にクラスをつけていく方法
-
画像にマウスを乗せた時のJava ...
-
bxsliderでスライドショーの間...
-
複数の要素へ appendchild でき...
-
jQueryでタブ、スライダーを使...
-
SimplyScrollについて
-
bxSliderのランダム表示について
-
javascript 神経衰弱
おすすめ情報