はじめまして。
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の数値を変更すれば良い様なものが理想です。
どなたか、よろしくお願い致します。
No.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();
});
});
});
これでどうでしょうか。
早速のご回答有難うございます。
思っていた様に動かせました。
まだ、勉強を始めたばかりでコードを見てもどの部分がどういう内容になっているというのが良く解らないですが、勉強して少しずつ理解できる様にしていきます。
ありがとうございました。また、よろしくお願いします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
追加ボタンを押した際に ok ボ...
-
GASでチェックボックスを一括of...
-
特定の文字列を複数抜き出した...
-
jsonテキストデータの並び替え...
-
jQueryで同じクラス名のものを...
-
鍵盤アプリで、スマホの画面に...
-
jQueryでシンセサイザーを作っ...
-
HTMLでサブフレームから親のス...
-
ボタンを押したあとに画像を表...
-
disabled プロパティが表示され...
-
初心者です。gulpでコンパイル...
-
食材の期限を管理するためにGAS...
-
ビデオのJSについて
-
プログラミング 学習
-
ジャバスクリプトについて。
-
Colorboxがうまく設置できません
-
jsで質問です。 ボタンが二つ存...
-
前回の質問の続き function mov...
-
このプログラムに、王手をかけ...
-
前回の質問の続き function mou...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
食材の期限を管理するためにGAS...
-
ビデオのJSについて
-
前回の質問の続き function mov...
-
このプログラムに、王手をかけ...
-
このプログラムに王様の逃げ道...
-
初心者です。gulpでコンパイル...
-
前回の質問の続き function mou...
-
鍵盤アプリで、スマホの画面に...
-
スマホ上で、左右スワイプで次...
-
jQueryで同じクラス名のものを...
-
読み込んだQRコードをフォーム...
-
追加ボタンを押した際に ok ボ...
-
Colorboxがうまく設置できません
-
階層別の組織図の自動作成について
-
二次元配列を使って順位をだす...
-
【GAS】WEBアプリでハイパーリ...
-
HTMLで作った時報アプリが動き...
-
セレクトを全て選択されていな...
-
画面遷移を行わずに同一ページ...
-
jsで質問です。 ボタンが二つ存...
おすすめ情報