Question

我正在努力学习Mootools（该死的，我想念考试Open的30天教程），并且我正在尝试构建一个简单的类切换脚本。我在这个网站上找到了一个可以解决问题的方法，但理想情况下，如果你点击当前活动的元素，我希望能够从li元素中删除所有.active实例。

如果有人想看看这个问题，我已经创建了JSFiddle 。

我确实看了一下mootools网站上的文档，但我恐怕还是无法处理哪个部分可以帮助我解决这个问题。我渴望自己学习如何做这些东西，所以我不仅仅是解决方案，而是指向mootools文档部分的指针我应该一直在寻找解决这个问题。感谢。

Answer 1

除了性能之外，您的代码还可以。通过性能，我的意思是 - 它不应该在每次点击时转到dom以获取元素列表或当前活动的元素来执行它需要做的事情 - 所有可以缓存的。您的代码将针对集合中的任何.active运行，该集合最初的.length为0，因此在第一次单击时不会发生任何事情。性能问题是必须再次选择所有元素和使用.active的元素，然后对它们运行.each以获得可以拥有它的单个成员。

你可以这样做：

http://jsfiddle.net/dimitar/m66Ju/2/

(function() {
    var ul = document.getElement("ul.examples"), lis = ul.getElements("li"), active;
    lis.addClass('transition');

    lis.each(function(item){
        item.addEvent('click',function(event){
            if (active) {
                // there is one, remove it.   
                active.removeClass('active');
            }
            if (active == this) {
                // is the active one already open?
                active = false;
                return;
            }
            // make a new active.
            active = this.addClass('active');
        });
    });
})();

这将是最高效的，并且也将与初始活跃的li一起使用。

没有关于如何构建代码以获得性能和重用的手册，但是有一些可能会有所帮助的讨论，比如Aaron Newton的Programming to Patterns（with mootools）等。经验法则是，不要过早做优化但代码，所以最慢支持的浏览器（通常是IE6或7）尽可能快地工作。点击事件提供了一些余地，但鼠标悬停可能是昂贵的。

Answer 2

因此，您的问题可以分两个阶段分解：

选择目标li元素。
删除active类。

请记住，MooTools是面向对象的。那么，你将在哪些对象上工作？ DOM元素。这意味着你应该看看MooTools的Element documentation。

如需选择，您需要Element.getElements method（或$$）。

然后，删除课程......好吧，只需Element.removeClass;）

因此，您的代码应该类似于：

$$('li.active').removeClass('active');

从Mootools选项卡中删除活动类

2 个答案: