繰り返し処理のシンプルな書き方

解決済

質問者：usanco
質問日時：2013/04/08 14:53
回答数：4件

プログラム初心者です。
下記のようなjavascript(Ajax)を作りました。
forなどで、もう少しシンプルに書く方法はありますか？

var check = ['link0', '#link1','#link2'];

$(check[0]).click(function () {
処理A
});

$(check[1]).click(function () {
処理A
});

$(check[2]).click(function () {
処理A
});

※処理Aは同じ処理

どうぞ宜しくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.4ベストアンサー

回答者： cero_d
回答日時：2013/09/05 18:38

forの場合

for (key in check) {
$(check[key]).click ( function() {
if(this.checked) {
thwrite();
} else {
thremove();
}

for (key in check) {
if ($(check[key]).attr('id') == this.id) {
$(".cell"+key).toggle(this.checked);
}
}
});
}

eachの場合
$.each(check, function(x,y){
$(y).click(function (){
if(this.checked) {
thwrite();
} else {
thremove();
}
$(".cell"+x).toggle(this.checked);
})
});

- 0
- 件

通報する

この回答へのお礼

遅くなってしまい、申し訳ございません。
丁寧に教えてくださってありがとうございました！

通報する

お礼日時：2013/09/26 22:10

No.3

回答者： taloo
回答日時：2013/04/09 04:42

jQueryの引数（セレクタ）はCSSセレクタのルールに準拠しているので、こういう書き方はできませんか？

var check = ['#link0', '#link1','#link2'];

$(check.join(',')).click(function(){
処理A
});

未検証です。

>No.1補足
処理内容が違ってれば、別々に書かなきゃ無理ですね。
一定のルールがあれば、そのルールをプログラムに書き直せば良いですが。

この回答への補足

ご回答有難うございます。
.joinというものもあるんですね！勉強します。
大変便利なので、他のシーンがあった時、是非活用させていただきます。
no.2のLancerVIIさんの書き込みにコードを補足させて頂きましたので、
お手隙の時にでもどうぞ宜しくお願い致します。

補足日時：2013/04/09 11:12

通報する

- 0
- 件

通報する

No.2

回答者： LancerVII
回答日時：2013/04/08 17:58

こんにちは。

何かちょっとしたミスがありませんかね。
私の環境では動きましたよ。

$(check[i]).click ( function() {
$(".cell"+i).toggle(this.checked);
});
};
だとclass="cell0",class="cell1"とか付けないといけないので個人的にはおすすめしません。

jQueryのセレクタは柔軟に対応できるのでいろいろなアクセス方法があります。
現在のHTMLの構成と、やりたいことがわかればもうちょっとアドバイス出来ると思います。

この回答への補足

こんにちは。2度目のご回答ありがとうございます。

>class="cell0",class="cell1"とか付けないといけないので
こちらは、後ほど.eachと.addClassを使って設定しようと思っておりました。

簡単に、コードを補足します。
ネットから切り貼りしたド素人製でお恥ずかしい限りなのですが、
何卒宜しくお願い致します。
イメージは、エクセルの上の部分です。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>アルファベット順のテーブルのテスト</title>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script>

</script>
<style>

</style>
</head>
<body>

<form name="chbox">
<input type="checkbox" id="link0">
<input type="checkbox" id="link1">
<input type="checkbox" id="link2">
</form>

<table id="sample">
<tr>
</tr>
<tr>
<td class="cell0">test0</td>
<td class="cell1">test1</td>
<td class="cell2">test2</td>
</tr>
</table>

</body>
</html>

補足日時：2013/04/09 11:08

通報する

- 0
- 件

通報する

No.1

回答者： LancerVII
回答日時：2013/04/08 15:03

こんにちは。

対象の要素にclass="hoge"とつけてあげて

$('.hoge').click ( function() {
// 処理A
});

では駄目でしょうか。

forで書きたいなら
for ( var i = 0; i < check.legnth; i ++ ) {
$(check[i]).click ( function() {
// 処理A
});
}

になると思いますが。

>var check = ['link0', '#link1','#link2'];
は
var check = ['#link0', '#link1','#link2'];
ですよね？

この回答への補足

早速のご回答ありがとうございます。

for ( var i = 0; i < check.legnth; i ++ ) {
$(check[i]).click ( function() {
// 処理A
});
}

こちらの方向で行いたいのですが、
どうやら.clickイベントが実行されないようなんです。

あと質問とは若干異なるのですが、

$(check[i]).click ( function() {
$(".cell"+i).toggle(this.checked);
});
};

を繰り返したいと思っています。
（処理Aが微妙に違う）

>var check = ['#link0', '#link1','#link2'];
すみません、#が抜けておりました。
ありがとうございます。