更高效的javascript布尔值

More efficient javascript boolean

本文关键字：布尔值 javascript 高效      更新时间：2023-09-26

我有一个复选框和一些<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等），它将显示或隐藏<div>（#postblock、#taxomyblock等等）

获取每个<input>的ID并切换slideUp、slideDown函数可能更明智。

如何做到这一点？

首先，不要有一个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');
    });
});

小提琴示例

不使用jQuery可以提高效率。

将所有jQuery("#someID").is(":checked")替换为
document.getElementById('someID').checked，并且不需要编写自己的轻量级动画引擎，它将尽可能好。

或者你可以走上默默无闻的黑暗道路：

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

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

相关文章：