mootools 根据是否选中复选框显示/隐藏 div

Question

我有一个复选框，我想根据是否单击该复选框来在表单中显示字段集？即，如果选中该复选框，则不显示字段集，如果未选中该复选框，则显示字段集。

我的标记看起来像这样，

<fieldset class="toplined">
<label>Keep Image</label>
<input type="checkbox" name="update_image[]" value="1" id="toggle" checked='true'/>
</fieldset>

<fieldset class="toplined toggle_slide">
<label>Image:</label>
<input type="file" name="article_image[]">
</fieldset>

带有toggle_slide类的字段集是我想要显示/隐藏的字段集，我目前有这个mootools脚本，

$('toggle').addEvent('click', function(e){
    e = new Event(e);
    $$('.toplined toggle_slide').toggle();
    e.stop();
});

但这只会导致错误。

Answer 1

解决方案

这是一个快速解决方案。如果您有兴趣或需要有关如何使其发挥作用的更多信息，请继续阅读！

$('toggle').addEvent('click', function(e){
    if(this.checked)) {
        $('.toggle_slide').toggle();
    }
});

事件

在 Mootools 中，所有元素都有 addEvent 方法，该方法接受两个参数。第一个参数是事件的类型（例如单击），第二个参数是该事件发生时调用的函数。该函数有一个自动传递给它的参数，即事件本身。因此，在 addEvent 方法内创建新事件是一个很大的错误，因为新事件与调用 addEvent 方法函数的事件不同。您可以在函数参数列表中指定默认事件参数的名称，然后正常使用它。因此，在您的代码中，e 已经存在，因为这就是您在这段代码中调用的事件： function(e){ 以及所有行 e = new Event(e ); 的作用是用空白默认事件覆盖此参数。这几乎肯定不是您想要的。

即使 JavaScript 不存在，许多操作也会在事件发生时发生。例如，当提交表单时，提交事件告诉浏览器收集该表单的数据并将其发送到表单的操作。另一个例子是，当您单击链接时，单击事件会告诉浏览器跟随该链接。这些被称为默认事件。但是，当我们将 addEvent 方法附​​加到链接时，我们希望发生我们自己的操作，而不是浏览器的默认操作。我们可以通过使用事件对象的 stop 方法来防止这些默认操作的发生。

由于 e 是您的事件对象，因此 e.stop() 将防止发生任何默认操作。但是，在这种情况下，复选框上的单击事件的默认操作是选中或取消选中该复选框。 e.stop() 可能会阻止这种情况发生（我没有测试过），但充其量不会做任何事情。因此，它要么会让您的用户感到困惑，要么什么也不做，所以我建议您将其删除。

最后，在 addEvent 函数中，您可以使用 this 关键字来引用事件所附加到的元素。

选择器

Mootools 有一个非常先进的选择器系统，它允许您选择几乎任何您想要的东西。您需要选择有两个类的字段集。但是，您选择的选择器 $$('.toplinedtoggle_slide') 表示“查找具有 toplined 类的元素，然后在该元素内查找具有标签toggle_slide 的元素”。相反，您应该使用 $$('.toggle_slide')

元素

您可以使用 selected 属性检测复选框是否被选中。如果选中复选框，则返回 true，否则返回 false。在您的情况下，因为复选框是您要添加事件的元素，所以您可以使用 this.checked 来确定它是否被选中。

提示：如果您使用 Firebug，则可以使用 console.log 在控制台中打印任何元素。这将显示该元素在该时间点拥有的所有属性和方法。这将很快向您显示诸如检查之类的内容。

此外，Mootools 分为两个组件：Mootools core 和 Mootools more。如果您有 Mootools 中包含的 Element.Shortcuts，则仅在 Elements 上定义切换方法更多或者如果您自己编写了该方法。否则你会得到一个错误。

Answer 2

尝试 document.getElement("fieldset.toplined.toggle_slide").toggle();