javascript - moo ツールの Fx.Slide を使用して、多くのスライド オブジェクトを操作する最良の方法

Question

mootools 内で複数の Fx.Slides を処理するための最もエレガントなソリューションを考えようとしています。私はペアの単語がある単語の非常に長いリストを持つ辞書ページを開発しています - 翻訳とすべての翻訳は、単語リストだけを表示するデフォルトで非表示にする必要があります。ページ上の単語ごとに個別のスライドを作成する必要がないソリューションを探しています。スクリプトのサイズとパフォーマンスが影響を受けるため、訪問者が単語をクリックするとオンザフライで作成されます。私に関係します。初期状態を事前に「非表示」に設定する必要があり、CSS でそれを行いたくないという別の問題があります (ブラウザが JavaScript をサポートしていない人からすべてを隠してしまいます)。このようなことは可能ですか、それともループ内でスライドを作成することに頼る必要がありますか (私の要素 ID は w01、w02、... のようになります)? もしそうなら、どうすればそのブロックをループ内に入れることができますか?

Answer 1

ユーザーが Javascript Embedding extra styles with noscript を持っていないかどうかに関するこの質問を確認してください。

その後、mootools に集中できます。visability: hiddenJavascript を使用してページをロードするときに要素が必要です。一度にすべてを選択できるように、要素にクラスを指定します。要素を初期化する例。

$$('.sliders').each(function(el) {
    el.slide('hide').setStyle('visibility', 'visible');
});

ここで、クリック イベントを処理する必要があります。ここでも同じです。

html の例:

<h3 class="slideIn" >Some title</h3>
<div class="sliders>Some lengthy text<div>

html の例:

$$('.slideIn').addEvent('click', function() {
    this.getNext().getChildren('.sliders').slide();
});

フィドルの例: http://jsfiddle.net/b4Zjs/

編集: クリック イベントが必要な要素が多数ある場合は、イベント委任を使用することをお勧めします。次に、ページに 1 つのイベント リスナーを追加するだけで、場合によっては大きな違いが生じることがあります。

$('parent').addEvent('click:relay(h3.slideIn)', function(event, target) {
   target.getNext().getChildren('.sliders').slide();
});

jsFiddle の例: http://jsfiddle.net/b4Zjs/2/