jQuery の each を使いたいのですが。。

質問

$(document).ready(function() {
　$("#anchor1").click(function(event) {
　　$("#anchor1").addClass('style1');
　　$("#anchor2").removeClass('style1');
　　$("#anchor3").removeClass('style1');
　})
　$("#anchor2").click(function(event) {
　　$("#anchor1").removeClass('style1');
　　$("#anchor2").addClass('style1');
　　$("#anchor3").removeClass('style1');
　})
　・
　・
　・
});
※全角スペースいれてます。

上記のような処理をeachなどで楽に書きたいのですが、
どなたか教えていただけると助かります。。

クリックしたとこにstyle1が追加、後はスタイル無しに、という処理です。

回答No.1

steel_gray · ベストアンサー

IDではなくクラス(class="anchor")を付けておくのはどう？

$('.anchor').click(function(){
　$('.anchor').removeClass('style1');　//全部からクラスを削除
　$(this).addClass('style1');　//クリックされた要素にクラスを追加
});

お礼

ありがとうございます。

なるほど、発想の転換ですね。
確かにいけました！

行数も少なく、シンプルです。

回答No.3

MrYoYoYo

すでに回答済みですが、アドバイスを。

$(document).ready(function(){
var idAry = [ "anchor1", "anchor2", "anchor3", "anchor4", "anchor5" ];
var styleAry = { anchor1:'test1', anchor2:'test2', anchor3:'test3', anchor4:'test4', anchor5:'test5' };
$.each(idAry, function() {
var Obj = $('#' + this);
Obj.text('配列の値が引き渡される');
Obj.addClass(styleAry[this]);
});
});

指定したいエレメントに法則性がない場合は、
配列がオブジェクトで指定する事もできます。

お礼

eachのサンプルありがとうございます。

スタイルがtest1～test5までありますが、
今回の場合はスタイルは1種類で、
クリックした箇所に適用、後は削除という形をとりたいのです。

<ul>
<li id='#anchor1' class='style1'><a href='link'>あああ</a></li>
<li id='#anchor2'><a href='link'>いいい</a></li>
<li id='#anchor3'><a href='link'>ううう</a></li>
</ul>

というようなもので、class='style1'がクリックした先に適用という感じです。

回答No.2

noname#87714

こういう場合、全部の要素のクラスを変える必要はありませんよね。

全部の要素に共通のクラス class1 を一つ用意して、スタイルを変えるためのクラス class2 をもう一つ用意したら、

.class1 {
/* class1のものに付けるスタイル */
}
.class1.class2 {
/* class1かつclass2のものに付けるスタイル */
}

とすればいいですから。

そう考えると、質問の部分は、

$(document).ready(function() {
　$('.class1').click(function(event) {
　　$('.class2').removeClass('class2');
　　$(this).addClass('class2');
　})
});
// まずclass2が付いている要素からclass2を外し、
// 次にクリックした要素に対してclass2を付ける。

こんな感じになりますかね。jQuery使ったことないんですが、感覚では「こんな感じ」です。

お礼

ありがとうございます。

steel_grayさんと同じ考え方ですね。
どうやらまわりくどく考えていたようです。。

いったんまとめてremoveClassしちゃえばよかったんですね。。
勉強になります。