【最大10000ポイント】当たる!!質問投稿キャンペーン!

はじめまして。
MooToolsのFx.Slideというものを利用しようと考えています。
下記デモを見てなんとか動く様にはできたのですが、

http://demos.mootools.net/Fx.Slide

この動きを同じページ内で複数使用したい為に

var mySlide = new Fx.Slide('test1');
$('toggle1').addEvent('click', function(e){
e = new Event(e);
mySlide.toggle();
e.stop();
});

var mySlide = new Fx.Slide('test2');
$('toggle2').addEvent('click', function(e){
e = new Event(e);
mySlide.toggle();
e.stop();
});

上記の様に変更したのですが、これをもっとスマートに記述する方法はありませんか?

<a id="toggle1" href="#">toggle1</a>をクリックすると<div id="test1">…</div>が動く
<a id="toggle2" href="#">toggle30</a>をクリックすると<div id="test2">…</div>が動く


<a id="toggle30" href="#">toggle30</a>をクリックすると<div id="test30">…</div>が動く
この様にidの数値を変更すれば良い様なものが理想です。
どなたか、よろしくお願い致します。

このQ&Aに関連する最新のQ&A

A 回答 (1件)

classになりますが


<a class="toggle" href="#">toggle</a>をクリックすると<div class="test">…</div>

window.addEvent('domready', function(){
var btns = $$('.toggle');
var divs = $$('.test');

btns.each(function(el,index){
var mySlide = new Fx.Slide(divs[index], {mode: 'horizontal'});

btns[index].addEvent('click', function(e){
e = new Event(e);
mySlide.toggle();
e.stop();
});
});
});

これでどうでしょうか。
    • good
    • 0
この回答へのお礼

早速のご回答有難うございます。
思っていた様に動かせました。

まだ、勉強を始めたばかりでコードを見てもどの部分がどういう内容になっているというのが良く解らないですが、勉強して少しずつ理解できる様にしていきます。

ありがとうございました。また、よろしくお願いします。

お礼日時:2008/02/22 01:53

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング