for文の中にif文を入れて判定した結果

Question

###前提・実現したいこと
htmlにボタンを5つ置いて、それぞれIDを
"ID_0","#ID_1","#ID_2","#ID_3","#ID_4"と設定し、
javascriptでこういうコードを書きました

for(var i=0; i<5; i++){
	var id_name = "#ID_%d".replace("%d",i);
	$(id_name).click(function(){
		console.log(id_name);
	}
}

それぞれボタンを押した時に

#ID_0
#ID_1
#ID_2
#ID_3
#ID_4

となって欲しいんです

結果は

#ID_4
#ID_4
#ID_4
#ID_4
#ID_4

どのボタン押しても#ID_4になってしまいます。
最大値が変わってもどのボタンを押したか取得できるようにfor文で回しながら取れるようにしたいです。
どうぞよろしくお願いします。

Answer 1

まず、Syntaxエラーがあります。

$(id_name).click(function(){
        console.log(id_name);
    }

最後に閉じ括弧がありません。
ブラウザの開発者ツールを見ると「Syntax Error」が出ているはずです。

何故「4」になるのかは他の回答者の仰るとおりです。
基本的にループ内で関数を定義するのは避けてください。開発者ツールによってはWarningが出ると思います。

以下のようにclass属性でクリックされたらイベントをキャッチし、押されたIDを調べる方法があります。

<button id="ID_0" class="button">ID_0</button>
<button id="ID_1" class="button">ID_1</button>
<button id="ID_2" class="button">ID_2</button>
<button id="ID_3" class="button">ID_3</button>
<button id="ID_4" class="button">ID_4</button>

$('.button').click(function () {
  console.log(this.id);
});

jsbinはこちら
http://jsbin.com/licujecuje/edit?html,js,console,output

Answer 2

JavaScriptでは、変数は関数スコープか、グローバススコープしかありません。ブロックスコープという概念はそもそもないです。では、どうするか、というと、このようなアイデアがあります。

for(var i=0; i<5; i++){
    (function() {
        var id_name = "#ID_%d".replace("%d",i);
        $(id_name).click(function(){
            console.log(id_name);
        }
    })();
}

このようにすれば動くと思いますがいかがでしょうか？

Answer 3

javascriptには少し変わったところがあって、clickイベント実行時のid_nameは、実行時のシンボルid_nameの値を取りに行ってしまいます。id_nameはループ毎に更新されて、実行時には最後の値を使うことになります。

よって、実行時に名前を取得するようにすればいいので、$(this).idを使ってはいかがでしょうか。

Answer 4

まず、どうして処理がおかしくなっているかと言うと、
ボタンをクリックする時には既にid_nameの値が4になってしまっている為です。
clickイベント自体は問題なく宣言できても、
その中の処理はクリックして始めて実行されるので、結果は4となってしまいます。

予め配列の中にID名をキーとした値を入れておくですとか、
クリックした後でも値の変わらない方法を考えていけば上手く行くと思います。

[追記] 簡単ですがサンプルを作ってみました。
ただ、これくらいの処理であればイベントは1つだけ宣言しておいて、
クリック後に「何をクリックしたか」調べて、その後の処理に繋いだ方が綺麗かもしれませんね。
少しでも参考になりましたら……。

var click_text = [];
for(var i=0; i<5; i++){
	var id_name = "#ID_%d".replace("%d",i);
	click_text[i] = id_name;
	$(id_name).click(function(){
		var this_id = '#' + $(this).attr('id');
		console.log(click_text[this_id]);
	});
}