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

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

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

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

jQuery

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

Q&A

解決済

3回答

15661閲覧

【jQuery】セレクタに複数指定したい

k499778

総合スコア599

JavaScript

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

jQuery

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

0グッド

1クリップ

投稿2016/06/01 14:37

現在JavaScriptを実装しています。

メモリの節約のため、オブジェクトを一度変数に格納して、その変数を使って処理をしていく実装なのですが、
その変数複数に対して.onイベント処理を実装するにはどのように書いたらいいでしょうか?

具体的に言うと、

javascript

1var hoge = $('#aaa'), 2var fuga = $('#bbb'); 3 4$(hoge,fuga).on('click',function(){ 5 alert('アラート'); 6});

のようにしたいのです。
がこの書き方だとうまく行きませんでした。

javascript

1$(#aaa,#bbb).on('click',function(){ 2 alert('アラート'); 3});

だとうまくいくのですが、これを変数に詰めた状態で行う書き方はないでしょうか?

もしくは、それができないとしたらどのように書くのがベストなのでしょうか?
もしわかる方がいればよろしくお願い致します。

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

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

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

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

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

guest

回答3

0

やるならこうではないでしょうか?

javascript

1var hoge = '#aaa', 2var fuga = '#bbb'; 3$(hoge+","+fuga).on('click',function(){ 4 alert('アラート'); 5});

投稿2016/06/01 14:48

CodeLab

総合スコア1939

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

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

k499778

2016/06/01 14:58

回答ありがとうございます。 運用上オブジェクトをまず始めに変数に詰めてしまうので、 できればその状態で複数オブジェクトに同じ処理を登録する方法を知りたいのです。 もしそのやり方でできないのであれば、できないという事実も知りたいです。 その場合は hoge.on('click',function(){ alert('アラート'); }); fuga.on('click',function(){ alert('アラート'); }); と分けて書こうと思っています。 もしお答えていただけるのであれば教えていただけると嬉しいです。
guest

0

オブジェクトそれぞれに指定すれば良いのかなと思います。
読みやすく書きたいならこうかな?

javascript

1var $hoge = $('#aaa'), 2$fuga = $('#bbb'); 3 4[$hoge,$fuga].forEach(function($ele){ 5 $ele.on('click',function(){ 6 alert('アラート'); 7 }); 8});

投稿2016/06/01 15:13

oskbt

総合スコア1895

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

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

k499778

2016/06/01 15:32

回答ありがとうございます。 このような発想があるのですね。勉強になります! 今後のコーディングに活かしていきますー!
guest

0

ベストアンサー

Array.prototype.join

2つ以上のセレクタを結合する。

HTML

1<p id="aaa">aaa</p> 2<p id="bbb">bbb</p> 3 4<script type="text/javascript"> 5'use stirct'; 6function handleClick (event) { 7 console.log(event.type); 8} 9 10var selectors = ['#aaa', '#bbb']; 11jQuery(selectors.join()).on('click', handleClick); 12</script>

jQuery.prototype.add

2つのjQueryオブジェクトを結合する。

HTML

1<p id="aaa">aaa</p> 2<p id="bbb">bbb</p> 3 4<script type="text/javascript"> 5'use stirct'; 6function handleClick (event) { 7 console.log(event.type); 8} 9 10var a = jQuery('#aaa'), b = jQuery('#bbb'); 11jQuery(a.add(b)).on('click', handleClick); 12</script>

jQuery.prototype.concat (独自拡張)

3つ以上のjQueryオブジェクトを結合する。

HTML

1<p id="aaa">aaa</p> 2<p id="bbb">bbb</p> 3<p id="ccc">ccc</p> 4 5<script type="text/javascript"> 6'use stirct'; 7function handleClick (event) { 8 console.log(event.type); 9} 10 11console.log(jQuery.prototype.concat); 12 13Object.defineProperty(jQuery.prototype, 'concat', { 14 writable: true, 15 enumerable: false, 16 configurable: true, 17 value: function concat (elements) { 18 var clones = jQuery(this), 19 push = this.push; 20 21 for (var i = 0, l = arguments.length; i < l; ++i) { 22 push.apply(clones, arguments[i]); 23 } 24 25 return clones; 26 } 27}); 28 29var a = jQuery('#aaa'), b = jQuery('#bbb'), c = jQuery('#ccc'); 30jQuery(a.concat(b, c)).on('click', handleClick); 31 32console.dir(a.concat(b, c)); 33console.dir(a); 34</script>

Re: k499778 さん

投稿2016/06/01 15:07

編集2016/06/02 12:37
think49

総合スコア18156

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

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

k499778

2016/06/01 15:35

回答有り難うございます。 addを使ってjQueryオブジェクトを結合する方法が一番わかりやすくシンプルでしっくりきました。 ちなみになのですが、セレクタが3つの場合、どのように書くのがいいのでしょうか? 以下のように書いてうまく動きましたが、少しブサイクなような気がします。 3つになると、やはりこのような書き方になるのでしょうか? var selectors = ['#aaa', '#bbb','#ccc']; var a = $('#aaa'), b = jQuery('#bbb') ,c = jQuery('#ccc'); $(a.add(b).add(c)).on('click', handleClick);
think49

2016/06/01 15:50 編集

3つ以上なら jQuery.merge でしょうか。 jQuery オブジェクト自身を操作する API はそれほど多くないようなので Array.prototype からメソッドを借用することも検討の余地があるかもしれません。 Array.prototype.push, Array.prototype.concat
k499778

2016/06/01 15:58

返答ありがとうございます。 そのような方法があるのですね。 あとは自分で調べてみます。ありがとうございました。
think49

2016/06/02 12:39

すみません、jQuery.merge は3つ以上を結合できませんでした。 jQuery#add が可変引数でない時点で気が付くべきでしたね…。 3つ以上の jQuery オブジェクトを結合するコードを親記事に追記しました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問