mootools 元素追加_使用MooTools 1.2进行元素集合操作的快捷方式

mootools 元素追加

One mistake I've been making with MooTools is that I've been looping through element collections (retrieved by using $$ function) to add events and manipulate elements. When you've got an element collection, there's no need to loop through them. Why? Because you can simply add modification code to the element collection and MooTools does the looping internally. Let me illustrate my point below.

我使用MooTools犯的一个错误是，我一直在遍历元素集合(通过使用$$函数进行检索)来添加事件和操作元素。 当您拥有一个元素集合时，无需遍历它们。 为什么？ 因为您可以简单地将修改代码添加到元素集合，然后MooTools会在内部进行循环。 让我在下面说明我的观点。

Let me use my mouseover accordion example code to illustrate my point.

让我使用鼠标悬停手风琴示例代码来说明我的观点。

MooTools循环示例(坏/长) (MooTools Looping Example (Bad/Long))

$$('.toggler').each(function(el) {
	el.addEvent('mouseenter',function(e) {
		el.fireEvent('click');
	});
});

Above, we're looping through each item to add the event. This works fine but it's extra code.

上方，我们遍历每个项目以添加事件。 这可以正常工作，但这是额外的代码。

MooTools收集示例(好/短) (MooTools Collection Example (Good/Short))

$$('.toggler').addEvent('mouseenter', function() { this.fireEvent('click'); });

In this snippet, we skip the looping process all together and simply apply the addEvent() code to the collection. We also use the this keyword as an element reference instead of the individual element object. Of course, MooTools loops through the element collection internally but the above example shows you how to achieve the same effect using much less code.

在此代码段中，我们一起跳过了循环过程，仅将addEvent()代码应用于集合。 我们还将this关键字用作元素引用，而不是单个元素对象。 当然，MooTools在内部循环遍历元素集合，但是上面的示例向您展示了如何使用更少的代码来实现相同的效果。

翻译自: https://davidwalsh.name/element-collection-manipulation-shortcut-using-mootools

mootools 元素追加