2

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

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");
    }
});

这就像它应该的那样工作；它获取复选框的ID<input> ，并且对于每个<input>（#filtertype、#taxonomycat等），它将显示或隐藏一个<div>（#postblock、#taxonomyblock等）

获取 each的ID<input>并切换slideUp,slideDown功能可能更聪明。

如何才能做到这一点？

4

2 回答 2

4

不使用 jQuery可能会更有效。

用 替换您jQuery("#someID").is(":checked")的所有内容
document.getElementById('someID').checked，而无需编写自己的轻量级动画引擎，该引擎与您将获得的一样好。

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

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

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

于 2013-08-15T12:00:04.807 回答
4

首先，与其拥有一个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');
    });
});

示例小提琴

于 2013-08-15T12:01:29.250 回答