0

我对 mootools 1.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。我认为这不是性能最高的，也许我可以在一个循环中使用 index 完成所有这些操作？

其他小问题（根本不那么重要）：如何在一行代码中的 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 回答