Question

我对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。我不认为这是最高效的，也许我可以用索引在一个循环中完成所有这些？

其他一些小问题（根本不重要）：如何在一行代码中将2个元素添加相同的事件（以避免代码行的乘法，如果用户点击不同，则执行完全相同的操作按钮）？

非常感谢！

Answer 1

可以做几件事。

- 事件委托

想法：将单个事件附加到菜单项的父项，这些项目根据与事件条件匹配的子项生成而触发

这样：

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

缺点是您需要读取ID，但如果它们的顺序正确，您可以从目标el中删除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]));
        });
    });
}());

这样做的好处是，你不需要提示文件上的ID，也没有标题标签或源代码上的任何内容。缺点是，每个链接都有自己的点击事件。

如何在Mootools 1.4中互连（监听/动作）单独的元素？

1 个答案:

- 事件委托

- 循环附加事件有一个索引引用，它将匹配目标