Mootools Click Проблема события

Этот кусок кода работает для первого клика. но тогда, похоже, не удастся получить новый идентификатор при следующем щелчке. идея состоит в том, чтобы показать одну часть формы, а при нажатии на кнопку она скрывает первую часть и показывает вторую часть. Любая идея, что я делаю неправильно? Я думаю, это как-то связано с «этим», но, насколько я понимаю, он также должен получить идентификатор из второй ссылки.

        window.addEvent('domready', function() 
            {
            $('page_2').slide('hide');
            $('page_3').slide('hide');
            $('page_4').slide('hide');
            $('page_5').slide('hide');
            var togglePrefix = 'toggle_', boxPrefix = 'page_', emptyPrefix = '';
            var links = $('submit_box').getElements('a');
            links.addEvent('click', function(e)
                {
                e.stop();
                var id = $(this.get('id').replace(togglePrefix,emptyPrefix));
                var id_new = parseInt($(this).get('id').replace(togglePrefix, emptyPrefix)) + 1; 
                var next = ('page_'+id_new);
                var id_old = $(this.get('id').replace(togglePrefix,boxPrefix));
                $(id_old).set('slide', {duration: 'long', transition: 'linear'});
                $(id_old).slide('out');
                $(next).slide('in');
                });
            });

HTML следует этому шаблону:

<div id="page_1">

    <div id="inhalt-gewinn">
      <div id="gewinn_bild"></div>
      <div id="gewinn_form">
          <form id="gewinnspiel" name="gewinnspiel" method="post" action="<?=$_SERVER[PHP_SELF]; ?>">
              <div id="input_box">
                  <div><input type="radio" name="frage1" value="Kamille" /><span>Kamille</span></div>
                  <div><input type="radio" name="frage1" value="Kaktus" /><span>Kaktus</span></div>
                  <div><input type="radio" name="frage1" value="Krokus" /><span>Krokus</span></div>

              </div>
              <div id="submit_box"><a id="toggle_1" class="frage">nächste Frage...</a></div>

      </div>
      <div id="gewinn_werbung"></div>
    </div>
</div>

person Arwed    schedule 04.08.2010    source источник


Ответы (2)


Насколько я понимаю пример, у вас есть куча div с id page_1, page_2 и так далее. В каждом div есть div с идентификатором «submit_box». Когда вы написали $('submit_box').getElements('a'), это добавит событие только в первый div, потому что идентификатор должен быть уникальным. На странице не может быть более одного элемента с уникальным идентификатором. Итак, чтобы ваш пример работал, измените идентификатор на имя класса и используйте $$('div.submit_box a').

person Andreas Köberle    schedule 05.08.2010

Многократное использование идентификатора на странице испортило код! После исправления это заработало нормально

person Arwed    schedule 04.08.2010
comment
Должен быть лучший способ написать это. Пожалуйста, сделайте jsfiddle (jsfiddle.net), и, возможно, кто-то поможет вам правильно управлять. - person Chase Wilson; 05.08.2010