質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

4回答

218閲覧

文字が少し違うだけの複数のイベントを1つにまとめたいです

takopo

総合スコア484

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2018/07/19 16:56

編集2018/07/19 17:26

質問させてください。
今、ボタンを押すと画像が切り替わるプログラムをjqueryで書いていまして、うまく動作はしたものの、以下のような数字が違うだけの複数のイベントをもう少しシンプルにできればなと思い、1つにまとめる方法を探してみたのですがなかなか見つかりませんでした。もし良い方法がありましたらどなたかご教授いただけないでしょうか。

javascript

1$(function() { 2 $('.btn1').on('click', function() { 3 test(1); 4 }); 5 $('.btn2').on('click', function() { 6 test(2); 7 }); 8 $('.btn3').on('click', function() { 9 test(3); 10 }); 11 $('.btn4').on('click', function() { 12 test(4); 13 }); 14 $('.btn5').on('click', function() { 15 test(5); 16 }); 17});

htmlは以下のような形になっております。(質問用に少し簡明にしてあります。)

html

1<img class="btn1" src="btn.png"> 2<img class="btn2" src="btn.png"> 3<img class="btn3" src="btn.png"> 4<img class="btn4" src="btn.png"> 5<img class="btn5" src="btn.png">

実際のソースはけっこう煩雑になっているのですが以下に記載させていただきます。
実はボタンをクリックではなく、サムネイルをマウスオーバーで、拡大部に画像とテキストを表示させるようにしています。ここのイベント部分が少し重複気味だなと思い、質問させていただきました。

javascript

1$(function(){ 2 $('.js-gallery').each(function() { 3 var $_self = $(this); 4 5 function DisplayImage(num) { 6 var img_full = $_self.find('.js-change-img' + num + ' img').attr('src'); 7 $_self.find('.js-gallery-target img').fadeOut('fast', function() { 8 $_self.find('.js-gallery-target img').attr('src', img_full).fadeIn(); 9 for (var i = 1; i <= 8; i++) { 10 $_self.find('.js-change-txt' + i).hide(); 11 } 12 $_self.find('.js-change-txt' + num).fadeIn(); 13 }); 14 } 15 16 $_self.find('.js-change-img1 img').mouseover(function() { 17 DisplayImage(1); 18 }); 19 $_self.find('.js-change-img2 img').mouseover(function() { 20 DisplayImage(2); 21 }); 22 $_self.find('.js-change-img3 img').mouseover(function() { 23 DisplayImage(3); 24 }); 25 $_self.find('.js-change-img4 img').mouseover(function() { 26 DisplayImage(4); 27 }); 28 $_self.find('.js-change-img5 img').mouseover(function() { 29 DisplayImage(5); 30 }); 31 $_self.find('.js-change-img6 img').mouseover(function() { 32 DisplayImage(6); 33 }); 34 $_self.find('.js-change-img7 img').mouseover(function() { 35 DisplayImage(7); 36 }); 37 $_self.find('.js-change-img8 img').mouseover(function() { 38 DisplayImage(8); 39 }); 40 }); 41});

html

1<div class="js-gallery"> 2 <!-- 拡大部 --> 3 <div class="c-gallery__large js-gallery-target"> 4 <div class="c-gallery__large-img"><img src="images/common/sample/sample01.jpg" alt="" style="display: inline;"></div> 5 6 <!-- テキスト --> 7 <div class="js-change-txt1" style="display: block;">テキスト1テキスト1テキスト1テキスト1</div> 8 <div class="js-change-txt2" style="display: none;">テキスト2テキスト2テキスト2テキスト2</div> 9 <div class="js-change-txt3" style="display: none;">テキスト3テキスト3テキスト3テキスト3</div> 10 <div class="js-change-txt4" style="display: none;">テキスト4テキスト4テキスト4テキスト4</div> 11 <div class="js-change-txt5" style="display: none;">テキスト5テキスト5テキスト5テキスト5</div> 12 <div class="js-change-txt6" style="display: none;">テキスト6テキスト6テキスト6テキスト6</div> 13 <div class="js-change-txt7" style="display: none;">テキスト7テキスト7テキスト7テキスト7</div> 14 <div class="js-change-txt8" style="display: none;">テキスト8テキスト8テキスト8テキスト8</div> 15 </div> 16 17 18 <!-- サムネイル --> 19 <div class="c-gallery__thumbs"> 20 <div class="js-change-img1"><img src="images/sample01.jpg" alt=""></div> 21 <div class="js-change-img2"><img src="images/sample02.jpg" alt=""></div> 22 <div class="js-change-img3"><img src="images/sample03.jpg" alt=""></div> 23 <div class="js-change-img4"><img src="images/sample04.jpg" alt=""></div> 24 <div class="js-change-img5"><img src="images/sample05.jpg" alt=""></div> 25 <div class="js-change-img6"><img src="images/sample06.jpg" alt=""></div> 26 <div class="js-change-img7"><img src="images/sample07.jpg" alt=""></div> 27 <div class="js-change-img8"><img src="images/sample08.jpg" alt=""></div> 28 </div> 29 30</div>

低レベルな質問ですみません。
よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2018/07/19 17:03

HTML部分を提示してもらうと、多分3行くらいになると思います。
takopo

2018/07/19 17:10

ご返信ありがとうございます。html部分を追加してみました。クラス名の連番はどうしても必要そうです。
退会済みユーザー

退会済みユーザー

2018/07/19 17:11

シンプルに記述するのはいいけど、「画像が切り替わるプログラム」を作っていることが読み取れるだけの分量は書いてください。
takopo

2018/07/19 17:28

確かに説明不足でした…申し訳ございません。実際のソースを追加しましたので、見ていただけると助かります。
guest

回答4

0

HTML5なら data-* 属性を使うのもありです。
https://codepen.io/anon/pen/XBNjLK

html

1<img class="button" data-num="1" src="http://via.placeholder.com/150x50"> 2<img class="button" data-num="2" src="http://via.placeholder.com/150x50"> 3<img class="button" data-num="3" src="http://via.placeholder.com/150x50"> 4<img class="button" data-num="4" src="http://via.placeholder.com/150x50"> 5<img class="button" data-num="5" src="http://via.placeholder.com/150x50">

HTMLではクラスを同じものにしておいて、JS上で使いたい値を data-num などの値で指定しておきます。
これを dataset から受け取って処理することができます。

js

1$("img.button").on("click", function () { 2 console.log(this.dataset.num); 3})

ただし、実行してみるとわかりますが、この時点では num の値は文字列ですので、数値として扱いたい場合は変換する必要があります。

投稿2018/07/19 17:40

mather

総合スコア6753

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

takopo

2018/07/19 18:41

data-属性についてためになる方法をお教えいただきありがとうございます。こちらを使ってソースをシンプルにすることができました。今回は先にご回答いただいたこともあり、jun68ykt様をベストアンサーとさせていただきました。申し訳ございません…ご教授いただきましたこと大変感謝しております。
guest

0

ベストアンサー

こんにちは。

HTMLを修正して、以下のように data属性を追加するのはいかがでしょうか?

修正前:

html

1<button class="btn1">ボタン1</button> 2<button class="btn2">ボタン2</button> 3<button class="btn3">ボタン3</button> 4<button class="btn4">ボタン4</button> 5<button class="btn5">ボタン5</button>

  

修正後:

html

1<button class="btn" data-value="1">ボタン1</button> 2<button class="btn" data-value="2">ボタン2</button> 3<button class="btn" data-value="3">ボタン3</button> 4<button class="btn" data-value="4">ボタン4</button> 5<button class="btn" data-value="5">ボタン5</button>

上記の修正後のHTMLに対して、JSは以下のように、5つのボタンで
1個のクリックハンドラを共有させることができます。

修正後:

javascript

1$(function() { 2 $('.btn').on('click', function() { 3 test($(this).data("value")); 4 });

以下は上記の修正を示すデモです。

  

以上参考になれば幸いです。


補足1

ご質問に詳細なコードを追記される前に回答を書いてしまったので、ちょっと状況を誤読していたかもしれません。
その場合は、申し訳ありませんが、私の回答は無視してください。

補足2

どのボタンがクリックされたのかを示す、1から5の数字を、クリックされたボタンの位置を示すインデクスに 1を加えて得ることにすれば data-属性も不要で、以下のようにも出来るかと思います。

javascript

1 $('.btn').each(function(i) { 2 $(this).on('click', function() { test(i+1); } ); 3 });

例: https://jsfiddle.net/jun68ykt/f7k6t9wz/18/

投稿2018/07/19 17:38

編集2018/07/19 18:00
jun68ykt

総合スコア9058

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

takopo

2018/07/19 18:32

ご返信遅くなってすみません。今回data属性というものを初めて知ったのですが、クラスに連番を書くよりも分かりやすく、cssとの衝突の心配もなく良さそうですね。ご回答いただいたやり方で今プログラムを修正してみました所、無事に動作しました! 今回はイベント部分をシンプルにするのが目的だったのですが、ご回答いただいたすべてのご意見は大変参考になるものばかりでした。 今回はdata属性を使用するのが良さそうかなと思いましたので、上の方にもお教えいただいたのですが、先にご回答いただいたjun68ykt様をベストアンサーとさせていただきたいと思います。 他の方も本当にありがとうございました。
jun68ykt

2018/07/19 18:38

> 無事に動作しました! とのことでよかったです!
guest

0

クラスやIDに連番をつけるのは、保守性などの面でオススメしない。
jQuery を利用しているのなら、$(this)の出番です。

html

1<!DOCTYPE HTML> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 .btn { 8 border: 1px solid #333; 9 } 10 </style> 11 </head> 12 <body> 13 <div> 14 <img class="btn btn-hover" src="https://dummyimage.com/200x60/000/fff&text=Black" data-altimage="https://dummyimage.com/200x60/000/fff&text=White" /> 15 <img class="btn btn-hover" src="https://dummyimage.com/200x60/000/fff&text=Black" data-altimage="https://dummyimage.com/200x60/000/fff&text=White" /> 16 <img class="btn btn-hover" src="https://dummyimage.com/200x60/000/fff&text=Black" data-altimage="https://dummyimage.com/200x60/000/fff&text=White" /> 17 <img class="btn btn-hover" src="https://dummyimage.com/200x60/000/fff&text=Black" data-altimage="https://dummyimage.com/200x60/000/fff&text=White" /> 18 <img class="btn btn-hover" src="https://dummyimage.com/200x60/000/fff&text=Black" data-altimage="https://dummyimage.com/200x60/000/fff&text=White" /> 19 </div> 20 <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 21 <script type="text/javascript"> 22 $(function () { 23 $("img.btn-hover").on('click', function () { 24 $(this).prop('src', $(this).data('altimage')); 25 }); 26 }); 27 </script> 28 </body> 29</html>

追記の前に回答書いたから、やりたいこととずれてるかも。

投稿2018/07/19 17:28

編集2018/07/19 17:30
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

takopo

2018/07/19 17:44

ご返信ありがとうございます。確かに連番をつけるのは項目が増えたときが大変なので良くなさそうですね。書いていただいた内容も自分にとっては勉強になりますので感謝しております。
退会済みユーザー

退会済みユーザー

2018/07/19 17:46

それだけではなくて、項目数が増えたときに、JavaScript部分は変更がないですよね。
takopo

2018/07/19 18:08

なるほど、そういう理由もあるのですね。スクリプトを変更しないようにするのが、保守性の面で重要だということが分かり大変参考になりました。ありがとうございます。
guest

0

こういうときの為のfor文です。
アイデア次第で色々と出来るので使い方はおさえておきましょ。

まずは基本形

JavaScript

1$(function() { 2 for (var i = 0; i < 5; i++) { 3 $('.btn' + i).on('click', function() { 4 test(i); 5 }); 6 } 7});

配列を用意してからfor...ofを利用する

JavaScript

1$(function() { 2 var targets = [ 3 {class: 'btn1', num: 1}, 4 {class: 'btn2', num: 2}, 5 {class: 'btn3', num: 3}, 6 {class: 'btn4', num: 4}, 7 {class: 'btn5', num: 5} 8 ]; 9 for (var it of targets) { 10 $(it.class).on('click', function() { 11 test(it.num); 12 }); 13 } 14});

投稿2018/07/19 17:20

miyabi-sun

総合スコア21158

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

takopo

2018/07/19 17:42

ご回答ありがとうございます。 for文を使うことは気付きませんでした。こういった方法もあるのですね、大変参考になりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問