Удаление активного класса из вкладок Mootools

Question

Я стараюсь изучать Mootools (чёрт, мне не хватает 30-дневного учебного пособия по рассмотрению Open), и я пытаюсь создать простой скрипт переключения классов. Я нашел один на этом самом сайте, который делает свое дело, но в идеале я хотел бы иметь возможность удалить все экземпляры .active из элементов li, если вы нажмете на активный в данный момент элемент.

Я создал JSFiddle , если кому-то захочется взглянуть на проблему.

Я взглянул на документацию на сайте mootools, но, боюсь, мне так и не удалось понять, какой раздел поможет мне в этом. Я заинтересован в том, чтобы научиться делать это сам, поэтому я был бы рад не только решению, но и указателю на части документации по mootools, которые я должен был найти, чтобы взломать это. Спасибо.

Answer 1

помимо производительности, ваш код в порядке. под производительностью я имею в виду - он не должен идти в дом при каждом щелчке, чтобы получить список элементов или текущий активный, чтобы сделать то, что ему нужно - все, что может быть кэшировано. Ваш код будет работать против любого .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.

Нет руководства по структурированию вашего кода для повышения производительности и повторного использования, но есть несколько выступлений, которые могут помочь, например, Программирование Аароном Ньютоном шаблонов (с помощью mootools) и т. Д. Основное правило - не делать преждевременных оптимизация, но код, так что самый медленный поддерживаемый браузер (обычно IE6 или 7) работает максимально быстро. события щелчка предоставляют некоторую свободу действий, но при наведении мыши могут быть дорогими.

Answer 2

Итак, ваша проблема может быть разложена в два этапа:

1. Выбор цели li элементов.
2. Удалить класс active.

Помните, что MooTools является объектно-ориентированным. Итак, над какими объектами вы будете работать? Элементы DOM. Это означает, что вы должны взглянуть на документацию MooTools Element .

Для выбора требуется метод Element.getElements (или $$).

Затем, для удаления класса ... Ну, просто Element.removeClass;)

Итак, ваш код должен выглядеть примерно так:

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