MooTools: Как добавитьEvents к неподходящим элементам с помощью .each? - PullRequest
Новая
       22

MooTools: Как добавитьEvents к неподходящим элементам с помощью .each?

0 голосов
/ 13 декабря 2011

я пытаюсь сделать так, чтобы каждый заголовок определенного класса вызывал метод «слайд» для своего брата другого класса (в данном случае «accordion_header» и «accordion_content» соответственно).Я нацеливаюсь на классы, потому что, ну, это имеет смысл, верно?

вот код: 

window.addEvent('domready', function() {
    console.log('trying to set click-on-header to open sib div\n');
    $$('.accordion_header').each.addEvent('click', function(e) {
        $('.accordion_content').slide('toggle');
    }); 
});

вот HTML.содержание не имеет значения, но структура одинакова для всех таких «аккордеонов»: 

<div id="itemOne">
    <div class="accoridon_header header_highlight">
        <h2 class="stripeToRight gradient">#</h2>
    </div>  <!-- end of accoridon_header -->    

    <div class="accordion_content">
        #
    </div>  <!-- end of accordion_content -->
</div>  <!-- end of itemOne -->

Излишне говорить, но, скорее всего, следует, что код работает не так, как я ожидал.что я пропустил?

WR!

PS: я хотел бы добавить / удалить дополнительный класс в заголовок, чтобы указать состояние ... есть ли быстрый способ для этого?

Ответы [ 2 ]

4 голосов
/ 13 декабря 2011

Хорошо, давайте проясним некоторые вещи:

elements.each.addEvent неверно, вы можете использовать addEvent непосредственно для коллекции, например elements.addEvent. 

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

    console.log('trying to set click-on-header to open sib div\n');

    $$('.accordion_header').addEvent('click', function(e) { 

          this.getParent().getElement('.accordion_content').slide('toggle'); //get accordion content

    });


});

демо здесь

если вы хотите добавить / удалить класс внутри обратного вызова click, вы можете использовать this.addClass('class') с this.removeClass('class') или - лучше в этом случае - this.toggleClass('class')

p.s. в вашем html вместо аккордеона есть accoridon;)

0 голосов
/ 13 декабря 2011 
 $$('.accordion_header').each.addEvent(…

Этот вызов (или, скорее, отсутствие) является вашей проблемой. Прочитайте документацию each и фактически вызовите метод each вместо попытки доступа к addEvent свойству each, которого, конечно, не существует.

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

 Array.each($$('.accordion_header'), function(currentHeader) {
      currentHeader.addEvent(…
...