Question

我编写了这段代码，但由于我刚刚开始学习JS，因此无法找出优化此代码的最佳方法。因此，每个if语句都重复一次。

$(function() {
    var lang = $(".lang input[type='checkbox']");
    var gender = $(".gender input[type='checkbox']");
    if(lang.length == lang.filter(":checked").length){
        $('.lang').hide();
        $('.lang-all').click(function(){
            $('.lang-all').hide();
            $('.lang').slideToggle(200);
        });
    } else {
        $('.lang').show();
        $('.lang-all').hide();
    }

    if(gender.length == gender.filter(":checked").length){
        $('.gender').hide();
        $('.gender-all').click(function(){
            $('.gender-all').hide();
            $('.gender').slideToggle(200);
        });
    } else {
        $('.gender').show();
        $('.gender-all').hide();
    }
});

所以这是我的代码，你可以在第15行看到 如果（性别 ...我有以前代码的副本，只是从＆＃更改了变量34; lang＆＃34; to＆＃34;性别＆＃34;。由于我有两个以上的变量，我不想为每个变量复制代码，所以我希望有一个解决方案优化它。

Answer 1

您可以编写函数以使代码更抽象，请参阅：

function isChecked(obj, jq1, jq2){
    if(obj.length == obj.filter(":checked").length){
        jq1.hide();
        jq2.click(function(){
            jq2.hide();
            jq1.slideToggle(200);
        });
    } else {
        jq1.show();
        jq2.hide();
    }
}

//Your jQuery code, more abstract
$(function() {
    var lang = $(".lang input[type='checkbox']");
    var gender = $(".gender input[type='checkbox']");

    isChecked(lang, $('.lang'), $('.lang-all'));
    isChecked(gender, $('.gender'), $('.gender-all'));
});

Answer 2

创建一个具有类似功能的函数，然后将参数作为类或id传递

$(function() {
call('.lang');
call('.gender');
function call(langp){
var lang = $(langp+" input[type='checkbox']");
    if(lang.length == lang.filter(":checked").length){
        $(langp).hide();
        $(langp+'-all').click(function(){
            $(langp+'-all').hide();
            $(langp).slideToggle(200);
        });
    } else {
        $(langp).show();
        $(langp+'-all').hide();
    }
}

});

如何优化这个javascript重复

2 个答案: