Question

我有一个复选框和一些<div>，只要选中复选框，它就会显示/隐藏。现在一切都很好但可能更有效率。

jQuery("#filtertype").change(function () {
    if (jQuery("#posttype").is(":checked")) {
        jQuery("#postblock").slideDown("slow");
    } else {
        jQuery("#postblock").slideUp("slow");
    }

    if (jQuery("#taxonomycat").is(":checked")) {
        jQuery("#taxonomyblock").slideDown("slow");
    } else {
        jQuery("#taxonomyblock").slideUp("slow");
    }

    if (jQuery("#taxonomytag").is(":checked")) {
        jQuery("#taxonomyblocktag").slideDown("slow");
    } else {
        jQuery("#taxonomyblocktag").slideUp("slow");
    }

    if (jQuery("#fieldjeskey").is(":checked")) {
        jQuery("#fieldblock").slideDown("slow");
    } else {
        jQuery("#fieldblock").slideUp("slow");
    }

    if (jQuery("#sliderme").is(":checked")) {
        jQuery("#sliderblock").slideDown("slow");
    } else {
        jQuery("#sliderblock").slideUp("slow");
    }
});

这应该是应该的;它获取复选框<input>的 ID ，并且对于每个<input>（ #filtertype，＃taxonomycat 等），它将显示或隐藏{ {1}}（＃postblock，＃taronomyblock 等）

获取每个<div>的 ID 并切换<input>，slideUp功能可能更为明智。

如何做到这一点？

Answer 1

not using jQuery可能会提高效率。

将所有jQuery("#someID").is(":checked")替换为 document.getElementById('someID').checked，而且还没有编写自己的轻量级动画引擎，而且效果会很好。

或者你可以走黑暗的道路：

jQuery("#postblock")["slide"+(document.getElementById('posttype').checked ? "Down" : "Up")]("slow");

但这可能不是一个好主意：p

Answer 2

首先，不是拥有id选择器列表，而是将每个复选框的一个类与data属性一起放置以指定关系。像这样：

<input type="checkbox" name="posttype" class="filter-checkbox" data-rel="postblock" value="foobar" />

然后在javascript中，您可以将上面的所有代码简化为以下内容：

jQuery("#filtertype").change(function() {
    $('.filter-checkbox').each(function() {
        var func = this.checked ? 'slideDown' : 'slideUp';
        $('#' + $(this).data('rel'))[func]('slow');
    });
});

Example fiddle

更高效的javascript布尔值

2 个答案: