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

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

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

选择器

Mootools有一个非常先进的选择器系统，您可以选择几乎任何您想要的东西。您需要选择包含两个类的fieldset。但是，您选择的选择器$$('.toplined toggle_slide')表示“查找具有顶级类的元素，然后在该元素内部，找到带有标记toggle_slide的元素”。相反，您应该使用$$('.toggle_slide')

元素

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

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

此外，Mootools分为两个组件，Mootools核心和Mootools。如果您从Mootools中添加Element.Shortcuts或者您自己编写了该方法，则仅在Elements上定义toggle方法。否则你会收到错误。

Answer 2

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

mootools显示/隐藏div取决于是否选中复选框

2 个答案:

解决方案

活动

选择器

元素