mootoolsの$$('.class')について

質問

こんにちは、

.item934クラスを持つ項目をクリックするときに.item935クラスを持つ項目の背景を透明にしたいのですが、以下のコードでは動作しないそうです。javascriptライブラリとしてmootoolsを使っています。

$$('.item934').addEvent('click', function(e){
$$('.item935').style.backgroundColor='transparent'; //問題になる行
mySlide.slideOut();
if(this.style.backgroundColor=='black'){
this.style.backgroundColor='transparent';
}else{
this.style.backgroundColor='black';
}
e = new Event(e);
mySlide0.toggle();
e.stop();
});

$$('.item934').addEventがちゃんと動作するのに、$$('.item935').style.backgroundColorはどうして動作しないのでしょうか？

わかる方がいらっしゃいましたら、教えていただければありがたいです。
ご回答をよろしくお願いします。

回答No.1

holyshared · ベストアンサー

$$は要素のリストを返すので、styleプロパティは指定できないからです。
又、$$ドキュメント全体から、該当する要素を全検索するのでパフォーマンスが下がります。

通常このような処理をする場合、$で絞り込んだ後にgetElement又は、getElementsで絞り込むのが一般的です。

簡単な例を書きました。
http://jsfiddle.net/holyshared/bXHey/

後、コードだけですと正確な解答が出来ないのですが、HTMLの構造はどうなっていますか？

お礼

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

HTMLは
<div id="submenu2">
<ul class="menumainmenu">
<li class="item934"><a href="#"><span>item1</span></a></li>
<li class="item935"><a href="#"><span>item2</span></a></li>
<li class="item341"><a href="#"><span>item3</span></a></li>
<li class="item306"><a href="#"><span>item4</span></a></li>
</ul>
</div>
のようになっています。
submenu2というidそして、menumainmenuというクラスを変更できますが、menumainmenuをidにすることはできません。
ulの中のコードはCMSにより自動的に生成されます。
動作が遅くなるかもしれないが、
var list = $$('menumainmenu');
var item2 = list.getElement('.item934');

それとも
var list = $('submenu2');
var item2 = list.getElement('.item934');
にしたほうがいいのかな？

宜しくお願いします

補足

ありがとうございます。仰ったとおりに変更すれば動作しました。

コード:
var mySlide0 = new Fx.Slide('smallmenu');
var mySlide = new Fx.Slide('smallmenu2');
var containerdiv = $('submenu2');
var item1 = containerdiv.getElement('.item934');
var item2 = containerdiv.getElement('.item935');

item2.addEvent('click', function(e){
mySlide0.slideOut();
item1.style.backgroundColor='transparent';
if(this.style.backgroundColor=='rgb(159, 158, 161)'){
this.style.backgroundColor='transparent';
}else{
this.style.backgroundColor='rgb(159, 158, 161)';
}

e = new Event(e);
mySlide.toggle();
e.stop();
});

(後略）