jQueryのthisの使い方

質問

javascript初心者なので根本的に勘違いしていたらすいません。
jQueryを使ってAAというclass領域をポイントしたら同じAAのclassを設定されているすべてのCSSをかきかえる、ということをしたいです。

$(document).ready(function(){
$(".AA").hover(
function () {
$(this).css('color', '#000000');
},
function(){
$(this).css('color', '#222222');
}
);
});
ここまでは書いたのですが、ポイントしているところだけしか変わらないので、ページ内のすべての同じクラスに結果が反映されるようにしたいのですが書き方がそもそも間違ってるんでしょうか…。

回答No.5

fujillin · ベストアンサー

#4です。

内容はほぼ同じですが、こちらのほうが少しだけ良いかも…

$(function(){
　function change(e){
　　var node = e.target, cls = node.className;
　　if(cls = cls.replace(/^\s+|\s+$/g,""))
　　　$("."+cls.replace(/\s+/g,", ."),this).
　　　　css("color", e.type=="mouseout"?"#000000":"#ff0000");
　}

　$("#wrapper").mouseover(change).mouseout(change);
});

お礼

ご回答大変ありがとうございました。
遅くなり申し訳ございません。
最終的には別の方法用いることになりましたが大変参考になりました。

回答No.4

fujillin

#2です。

＞hoverした領域のクラスを取得＞ifで判定＞処理　としたかったのですが書き方がわからなくて；
まったく違う意味に理解していました。

さて、クラスが複数設定してある場合はどうするのだろうか？
全部対象としてよいと仮定すれば、こんな感じ？
（#wrapper内の要素に適用。全角空白は半角に）

※ #3様がご指摘のように、色が分かりにくいので赤にしてあります。

$(function(){
$("#wrapper").bind({
　mouseover:change,
　mouseout:change
});

function change(e){
　var node = e.target, cls = node.className;
　if(!cls) return;
　cls = "." + cls.replace(/^\s+|\s+$/g,"").replace(/\s+/g,", .");
　$(cls,this).css("color", e.type=="mouseout"?"#000000":"#ff0000");
}
});

お礼

ご回答大変ありがとうございました。
遅くなり申し訳ございません。

回答No.3

reggaepunc

うーむ。。目的がイマイチ把握できないですね。
現状のソースを公開してもらえませんか？

あと、説明文は、
主語、述語、目的語を省略しなくて結構です。
不自然にクドイくらいの言い回しで問題ありません。

※あと一点。
#000000と#222222はほぼ同じ色ですが、質問者さんの環境では色の違いを認識できているのでしょうか。（私の環境では見分けがつきません。）

お礼

ご回答大変ありがとうございました。
遅くなり申し訳ございません。

回答No.2

fujillin

jqueryでは、イベント発生要素がthis値にセットされてhandlerに渡されるようです。
（多分、その方が便利なことが多いと考えられたからでしょう）
それなので、ご質問のような動作となっていると思われます。

全部をのcssを一緒に変えたいのであれば、ご提示のコードの
　$(this) の部分を $(".AA") に変えてあげれば、そのようになると思います。
（処理の効率化のため、先に$(.AA)を変数に置き換えておくのもありかも）

お礼

ご回答大変ありがとうございました。
遅くなり申し訳ございません。

補足

$(.AA)を変数に置き換えておくのもありかも
＞＞No.1さんへの補足に書いた通りなのですがこれがわからなくて困っておりました；；
hoverした領域のクラスを取得＞ifで判定＞処理　としたかったのですが書き方がわからなくて；
最初の質問で説明不足でした。すいません。

回答No.1

reggaepunc

こういうことでしょうか。
-------------------------------------------------
$(document).ready(function()
{
var AA = $(".AA");

AA.hover(
function()
{
$.each( AA, function()
{
$(this).css('color', '#000000');
});
},
function()
{
$.each( AA, function()
{
$(this).css('color', '#ff0000');
});
}
);// hover
});
-------------------------------------------------
何に使うのか気になりますね。面白い動きなので。皮肉ではなく。

お礼

ご回答大変ありがとうございました。
遅くなり申し訳ございません。

補足

すいません、根本的に説明がおかしかったようです。
ご回答いただきましたが全く意図と違っておりまして；
やりたいのは、例：AA、AB、ACというクラス領域が対象で各クラスはページ内に複数箇所、
どれかに触れた（hover）場合、
文字の色をかえ（.css('color', '#000000');）、
離れたら文字の色を元に戻す（.css('color', '#222222');）、ということです。