mootools - 奇偶元素的事件处理程序

Question

我有一堆带有 css 类选项的 span 元素

<div>
<span class="option">
</div>
<div>
<span class="option">
</div>
<div>
<span class="option">
</div>
<div>
<span class="option">
</div>

我想选择所有这些，然后将事件处理程序附加到他们的鼠标悬停事件。我最终得到了这个：

 $$('.option').addEvents({
      'mouseover': function() {
            // code

       },

});

但是我不知道如何弄清楚内部事件处理程序，如果当前选择的元素是偶数还是奇数，所以我可以根据这些信息做不同的事情。

Answer 1

您可以以不同的布局订购您的元素，然后使用 mootools 光滑的偶数、奇数选择：

http://jsfiddle.net/49zpm/1/

$$('.option:even').addEvents({
    'mouseover': function () {
        console.log('mouseover even');
    }

});


$$('.option:odd').addEvents({
    'mouseover': function () {
        console.log('mouseover odd');
    }

});

Answer 2

尝试使用each来迭代选项。这将为您提供当前索引：

$$('.option').each(function(elem, i) {
    elem.addEvents({
        mouseover: function() {
            if (i % 2) {
                // odd
            }
            else {
                // even
            }
        }
    });
});