0

mootools1.4と複数の別々の要素間の相互作用に少し問題があります。私はこのようなメニューを持っています：

<div id="links">
<a class="readmore" href="#1" title="1">Read More</a>
<a class="readmore" href="#2" title="2">Read More</a>
<a class="readmore" href="#2" title="3">Read More</a>
...
</div>

そしてこのような他の要素：コードPHP：

<div id="content">
<div id="1">Lorem Ipsum</div>
<div id="2">Lorem Ipsum</div>
<div id="3">Lorem Ipsum</div>
...
</div>

どちらも同じ長さです（メニューの各リンクには対応するdiv要素があります）。私がする必要があるのは、各メニューリンクにリスナーを作成して、クリックするとdivが表示されるようにすることです。そして、それが私の問題です。今のところ、メニューリンクのタイトルを使用して、同じIDを持つdivを開いているからです。私はそれが最もパフォーマンスが良いとは思いません、多分私はインデックスを使って1つのループでこれらすべてを行うことができますか？

その他の小さな質問（それほど重要ではありません）：1行のコードの2つの要素に同じイベントを追加する方法（ユーザーが別のボタンをクリックした場合にまったく同じことを行うためにコード行の乗算を回避するため）？

どうもありがとう ！

4

1 に答える 1

0

いくつかのことができます。

-イベントの委任

アイデア：イベント条件に一致する子elに応じて発生する単一のイベントをメニュー項目の親にアタッチします

それで：

document.id('links').addEvent('click:relay(a.readmore)', function(event, element){
    var id = element.get('title');
    // do something.
});

欠点は、IDを読み取る必要があることですが、正しい順序になっている場合は、ターゲットelsからIDを削除できます。

(function() {    
    var els = document.getElements('#content div');

    document.id('links').addEvent('click:relay(a.readmore)', function(event, element){
        var id = element.get('title'),
            hint = els[id-1];

        showHint(hint);
    });
}());

それについてです。添付されるイベントが少なくなります。

-イベントをアタッチするためのループには、ターゲットと一致するインデックスへの参照があります

(function() {    
    var els = document.getElements('#content div'),
        clickHandler = function(trigger, target){

        };

    document.getElements('#links a').each(function(element, index){
        element.addEvent('click', function(event) {
            event.stop();
            clickHandler(this, els[index]));
        });
    });
}());

その上、ヒントelsにIDは必要なく、ソースにタイトルタグなどは必要ありません。欠点は、各リンクに独自のクリックイベントがあります。

于 2012-08-26T19:14:02.450 に答える