Mootools 点击事件问题答案

【问题标题】：Mootools Click Event ProblemMootools 点击事件问题
【发布时间】：2010-08-04 12:04:04
【问题描述】：

这种代码和平适用于第一次点击。但是似乎无法从下次单击中获取新 ID。它背后的想法是显示一个表单的一部分，然后单击一个按钮，它首先隐藏并显示第二部分。知道我做错了什么吗？我想它与“this”有关，但据我了解，它也应该从第二个链接获取 id。

        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>

【问题讨论】：

标签： javascript mootools mootools-events

【解决方案1】：

如果我理解这个例子，你有一堆 id 为 page_1、page_2 等的 div。在每个 div 中都有一个 id 为“submit_box”的 div。当您编写$('submit_box').getElements('a') 时，它只会将事件添加到第一个 div 中，因为 id 必须是唯一的。页面中不能有多个具有唯一 ID 的元素。因此，为了让您的示例工作将 id 更改为类名并使用 $$('div.submit_box a')。

【讨论】：

【解决方案2】：

在页面上多次使用 ID 破坏了代码！修复此问题后，它工作正常

【讨论】：

必须有更好的写法。请制作一个 jsfiddle (jsfiddle.net)，也许有人可以帮助您正确引导。