jQuery文に、for文のカウンター変数を利用することは出来ないでしょうか?

下記のようなコードがあるとします。

>|javascript|
<div id="text1">AAA</div><div id="textpop1" style="display:none">pop - A</div>
<div id="text2">BBB</div><div id="textpop2" style="display:none">pop - B</div>
<div id="text3">CCC</div><div id="textpop3" style="display:none">pop - C</div>

<script>
$(window).bind('load', function() {
for (var i=1; i < 3; i++) {

$( "#text" + i ).bind( 'touchstart', function(){
if ($( "#textpop" + i ).css('display') == 'none') {
$( "#textpop" + i ).css('display','block');
}
});
}
});
</script>
||<

初歩的な質問と思いますが、ご教示お願いします。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2012/08/21 14:29:52
  • 終了:2012/08/21 20:59:16

ベストアンサー

id:Cherenkov No.1

Cherenkov回答回数1503ベストアンサー獲得回数4932012/08/21 14:58:25

ポイント100pt

touchstartイベントが発生したときのiを参照しているのでできません。
以下のようにするとか。

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(window).bind('load', function() {
	for (var i=1; i <= 3; i++) {
		$( "#text" + i ).bind( 'touchstart', function() {
		//$( "#text" + i ).bind( 'click', function() {
			var id = this.id.match(/text(\d+)/)[1];
			var textpop = $( "#textpop" + id );
			if (textpop.css('display') == 'none') {
				textpop.css('display','block');
			}
		});
	}
});
</script>
</head>
<body>
<div id="text1">AAA</div><div id="textpop1" style="display:none">pop - A</div>
<div id="text2">BBB</div><div id="textpop2" style="display:none">pop - B</div>
<div id="text3">CCC</div><div id="textpop3" style="display:none">pop - C</div>
</body>
</html>


class属性をつけてfor文を使わないほうがjQueryらしいかと。

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(window).bind('load', function() {
	$(".texttouch").bind('touchstart', function() {
	//$(".texttouch").bind('click', function() {
		var id = this.id.match(/text(\d+)/)[1];
		var textpop = $('#textpop' + id);
		if (textpop.css('display') == 'none') {
			textpop.css('display','block');
		}
	});
});
</script>
</head>
<body>
<div id="text1" class="texttouch">AAA</div><div id="textpop1" style="display:none">pop - A</div>
<div id="text2" class="texttouch">BBB</div><div id="textpop2" style="display:none">pop - B</div>
<div id="text3" class="texttouch">CCC</div><div id="textpop3" style="display:none">pop - C</div>
</body>
</html>
id:Cherenkov

回答2のようにクロージャを使えば、個々のカウンター変数を覚えておくことはできますね。
でもまあ複雑だし回答1の後半のようなコードのほうがおすすめです。

2012/08/21 15:18:20
id:gdwtseq

いつもいつもお世話になります。

例を2つも挙げていただき、ありがとうございます。
とても分かりやすく、理解できました。

2012/08/21 20:52:49

その他の回答(1件)

id:Cherenkov No.1

Cherenkov回答回数1503ベストアンサー獲得回数4932012/08/21 14:58:25ここでベストアンサー

ポイント100pt

touchstartイベントが発生したときのiを参照しているのでできません。
以下のようにするとか。

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(window).bind('load', function() {
	for (var i=1; i <= 3; i++) {
		$( "#text" + i ).bind( 'touchstart', function() {
		//$( "#text" + i ).bind( 'click', function() {
			var id = this.id.match(/text(\d+)/)[1];
			var textpop = $( "#textpop" + id );
			if (textpop.css('display') == 'none') {
				textpop.css('display','block');
			}
		});
	}
});
</script>
</head>
<body>
<div id="text1">AAA</div><div id="textpop1" style="display:none">pop - A</div>
<div id="text2">BBB</div><div id="textpop2" style="display:none">pop - B</div>
<div id="text3">CCC</div><div id="textpop3" style="display:none">pop - C</div>
</body>
</html>


class属性をつけてfor文を使わないほうがjQueryらしいかと。

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(window).bind('load', function() {
	$(".texttouch").bind('touchstart', function() {
	//$(".texttouch").bind('click', function() {
		var id = this.id.match(/text(\d+)/)[1];
		var textpop = $('#textpop' + id);
		if (textpop.css('display') == 'none') {
			textpop.css('display','block');
		}
	});
});
</script>
</head>
<body>
<div id="text1" class="texttouch">AAA</div><div id="textpop1" style="display:none">pop - A</div>
<div id="text2" class="texttouch">BBB</div><div id="textpop2" style="display:none">pop - B</div>
<div id="text3" class="texttouch">CCC</div><div id="textpop3" style="display:none">pop - C</div>
</body>
</html>
id:Cherenkov

回答2のようにクロージャを使えば、個々のカウンター変数を覚えておくことはできますね。
でもまあ複雑だし回答1の後半のようなコードのほうがおすすめです。

2012/08/21 15:18:20
id:gdwtseq

いつもいつもお世話になります。

例を2つも挙げていただき、ありがとうございます。
とても分かりやすく、理解できました。

2012/08/21 20:52:49
id:a-kuma3 No.2

a-kuma3回答回数4504ベストアンサー獲得回数18702012/08/21 15:00:17

ポイント100pt

前の質問 とノリは一緒です。

「クロージャ」という意味では、addEventListener でも、jQuery の bind でも、考え方は一緒です。

こんな感じになると思います。

$(window).bind('load', function() {
    for (var i=1; i <= 3; i++) {

        var f = (function() {
                    var ii = i;     // ★
                    return function () {
                                if ($( "#textpop" + ii ).css('display') == 'none') {
                                    $( "#textpop" + ii ).css('display','block');
                                }
                            };
                })();

        $( "#text" + i ).bind( 'touchstart', f);
    }
});

bind の引数に書いても大丈夫なのですが、分かりやすくするために、変数 f を導入しています。

後、for のループの不等号は、< ではなく、<= ですよね。

id:gdwtseq

先日もアドバイスありがとうございます。

最初、当方はこの方法をイメージしておりましたが、今回は回答No.1の前半を使わせて頂きました。また機会がございましたらご回答よろしくお願いします。

2012/08/21 20:58:53

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません