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

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

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

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

jQuery

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

Q&A

解決済

4回答

1345閲覧

イベントリスナの貼り付けをfor文で簡略化したい

Teso

総合スコア5

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2016/07/22 00:48

おそらく基本中の基本なのだと思いますが、調べようとしてもキーワードが大きすぎて、どうにもつかみどころがありませんでしたので、こちらで質問させていただきます。内容の稚拙さについてはご容赦ください。

###実装したいこと・試してみたこと
単純な規則に従ってid採番されているオブジェクトに対して、クリックイベントリスナを貼り付けていくというシンプルなスクリプトを実装しようとしています。オブジェクトの呼び出しにはjQueryを使用しています。そのまま書き下ろすと以下のような形になります。

javascript

1$("#object1").click(function(){ testFunc(1); }); 2$("#object2").click(function(){ testFunc(2); }); 3$("#object3").click(function(){ testFunc(3); }); 4$("#object4").click(function(){ testFunc(4); }); 5 6// #object"n"とtestFunc("n")は1:1対応 7 8function testFunc(num) { 9 ... 10}

ただ、これではいくら何でも冗長すぎるので…イベントリスナ貼り付けの部分をfor文でまとめたいのですが、ここがどうにもうまく書けません。まずは下のような形で書いてみました。

javascript

1for (var i=1; i<5; i++) { 2 $("#object"+i).click(function(){ testFunc(i); }); 3}

おそらく変数のスコープの問題だと思うのですが testFunc(i) が期待通りに動いてくれません(iは外側のスコープの値を引いてくれない)。

グローバル変数を宣言するのも何だか仰々しすぎるような気がしてしまって、こういった場合どのように書くのがシンプルなコードなのか、ベテランの方々の書き方をご教示いただきたいです。どうかよろしくお願いいたします。

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

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

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

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

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

guest

回答4

0

ベストアンサー

こんな感じですかね。

javascript

1for (var i=1; i<5; i++) { 2 (function(ii) { 3 $("#object"+i).click(function(){ testFunc(ii); }); 4 }(i)); 5}

動作サンプル

"javascript イベントリスナー ループ" で検索すると、いろいろサンプルや説明が出てきますよ。

投稿2016/07/22 01:20

alg

総合スコア2019

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

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

Teso

2016/07/22 01:42

即時関数に関する知識が不足していたので、この書き方自体が考えの中にありませんでした…。いただいたご回答をきっかけに、勉強が進みそうです。キーワードのご提案もとても助かります。ありがとうございました!
guest

0

この程度のことであれば自分のIDを参照するだけで
いいような気もしますが

javascript

1$(function() { 2 for(var i=1; i<5; i++) { 3 $("#object"+i).click(function(){ 4 var j=$(this).attr("id").match(/[0-9]+$/); 5 testFunc(j); 6 }); 7 }; 8});

※matchのタイプミスがあったので一部修正しました

投稿2016/07/22 01:38

編集2016/07/22 01:49
yambejp

総合スコア114572

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

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

Teso

2016/07/22 01:45

カウント変数だけでなんとかしようとして視野が狭まっていたので、この効率的なアプローチがあることに気付きませんでした…。違う切り口からのご回答、とても勉強になります。ありがとうございました!
guest

0

for 無しでも。

JavaScript

1$( '[id^="object"]').click( function() { 2 testFunc( $( this ).attr( 'id' ).replace( 'object', '' ) ); 3} );

投稿2016/07/22 02:07

kei344

総合スコア69364

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

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

Teso

2016/07/22 02:29

なるほど…!属性を参照するというアプローチは他の方からもアドバイスいただきましたが、for文なしでも表現できるんですね…。勉強になります。ありがとうございました!
guest

0

使える環境はまだ限られますが、ES6ではletを使うことで簡潔に書くことができます。

javascript

1for (let i=1; i<5; i++) { 2 $("#object"+i).click(function(){ testFunc(i); }); 3}

Babelなどでトランスパイルする、あるいはNode.js上なのでES6で書いて問題ない、という状況では使える技です。

投稿2016/07/22 01:52

maisumakun

総合スコア145121

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

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

Teso

2016/07/22 02:24

新しい言語仕様なのですね…!いろいろ調べてみたのですが、今回はクライアントサイドで動かすものですので、ちょっとES6で書くことはできなさそうです。自分にとってはとても直感的な書き方なので残念ですが…。ご回答ありがとうございました! cf. ECMAScript compatibility table http://kangax.github.io/compat-table/es6/
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問