Переключение MooTools if / then / else в зависимости от наличия класса css - PullRequest
Новая
       10

Переключение MooTools if / then / else в зависимости от наличия класса css

0 голосов
/ 05 декабря 2010

Я пытаюсь переключить класс и выполнить несколько других действий на основе класса css, назначенного определенному div.

Я использую MooTools 1.2.5.

Див выглядит так: 

<div class="loginbox"> Login Form Here </div>

У меня есть ссылка на страницу, которая выглядит следующим образом: 

<a href="#" class="loginlink">Show/Hide Login</a>

Для посетителей с включенным Javascript форма автоматически скрывается моим скриптом. 

<script type="text/javascript">

window.addEvent('domready',function() {

    $$('div.loginbox').addClass('hidden');

    $$('a.loginlink').each(function(linkitem){

        linkitem.addEvent('click', function(i){

            displayis = $$('div.loginbox').hasClass('hidden');

            if (displayis) {
                $$('div.loginbox').removeClass('hidden');
                // do several things
            } else {
                $$('div.loginbox').addClass('hidden');
                // do several other things          
            };

        });
    }); 

}); 

</script>

При первом нажатии на ссылку «Показать / Скрыть логин» все выглядит нормально, и на экране появляется div с классом «loginbox».

При повторном нажатии ссылки «Показать / Скрыть логин» ничего не происходит. Использование console.log, чтобы попытаться выяснить, что происходит, выглядит как первая часть оператора if, которая оценивается как истинная, когда она явно ложна.

Любопытно, что в приведенном выше сценарии я меняю «loginbox» на id и корректирую сценарий соответственно, он работает нормально. Я использую CMS, которая требует, чтобы "loginbox" был классом, а не div.

Простое использование ".toggleClass ('hidden')" также прекрасно работает, за исключением того, что я хочу сделать больше, чем просто переключать класс.

Спасибо за ваше время.

-Brent

1 Ответ

3 голосов
/ 05 декабря 2010

displayis = $$('div.loginbox').hasClass('hidden'); -> это довольно избыточно, поскольку имеет hasClass для всех членов html-коллекции, помещая результаты в массив.

переписать в: 

var theHiddenEl = document.getElement("div.loginbox.hidden");

itвернет элемент, если у него есть оба класса. 

if (theHiddenEl) {
    theHiddenEl.toggleClass("hidden"); // or removeClass etc. 
    // ... more stuff
}
...
...