Klicken Sie auf Mootools Ereignis Problem

Question

Dieser Friede von Code funktioniert für den ersten Klick. aber dann scheint es nicht in der Lage zu sein, neue ID ab dem nächsten Klick. Die Idee dahinter ist, ein Stück einer Form und mit Klick auf eine Schaltfläche, um es erste und zweite Teil zeigt verbirgt. Jede Idee, was falsch im tut? Ich denke, es hat etwas mit „diesem“, aber von meinem Verständnis soll die ID aus dem zweiten Link erhält auch zu tun.

        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');
                });
            });

folgt die html dieses Muster:

<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>

Answer 1

Wenn ich das Beispiel verstehe, haben Sie eine Reihe von div-Tags mit id PAGE_1, page_2 bekommen und so weiter. In jedem div ist ein div mit der id "submit_box". Wenn Sie $('submit_box').getElements('a') geschrieben wird das Ereignis nur auf den ersten div hinzufügen Ursache eine ID eindeutig sein. Sie kann nicht auf der Seite mit einer eindeutigen ID mehr als ein Element hat. So Ihr Beispiel Arbeit ändert die ID auf einen Klassennamen und die Nutzung zu bekommen $$ ( 'div.submit_box a').

Answer 2

Die Verwendung von ID's mehrere Male auf der Seite ruiniert den Code! Nach der Fixierung dieser es funktionierte gut