人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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>
||<

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

●質問者: gdwtseq
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● Cherenkov
●100ポイント ベストアンサー

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>

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

gdwtseqさんのコメント
いつもいつもお世話になります。 例を2つも挙げていただき、ありがとうございます。 とても分かりやすく、理解できました。

2 ● a-kuma3
●100ポイント

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

「クロージャ」という意味では、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 のループの不等号は、< ではなく、<= ですよね。


gdwtseqさんのコメント
先日もアドバイスありがとうございます。 最初、当方はこの方法をイメージしておりましたが、今回は回答No.1の前半を使わせて頂きました。また機会がございましたらご回答よろしくお願いします。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ