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,事件发生时也会发生许多操作.例如,提交表单时,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方法.否则你会收到错误.