Question

我目前正在使用此代码＆amp;寻找一种更简单，更短的展示，隐藏和展示方式禁用我的元素......

$("#chReportData").click(function () {
    if ($(this)[0].checked) {
        $("#reportDataOptions").show();
    } else {
        $("#ReportDataStatusOptions").hide();
        $("#reportDataOptions").hide();
        $('#chkReportPermission').attr('checked', false);
        $('#chReportDataStatus').attr('checked', false);
        $('#chReportDataCummulative').attr('checked', false);
        $('.allowedUpload').attr('checked', false);
        $('.allowedDelete').attr('checked', false);
    }
});

$("#chReportDataStatus").click(function () {
    if ($(this)[0].checked) {
        $("#ReportDataStatusOptions").show();
    } else if ($('#chReportDataCummulative').is('checked')) {
        $("#ReportDataStatusOptions").hide();
        $('.allowedUpload').attr('checked', false);
        $('.allowedDelete').attr('checked', false);
    } else {
        $("#ReportDataStatusOptions").hide();
        $('.allowedUpload').attr('checked', false);
        $('.allowedDelete').attr('checked', false);
    }
});

它运作正常，我只是想找一个更简单的方法...如果你知道一个更短的＆amp;更简单的方法，请分享......

Answer 1

您可以使用show而不是hide和toggle进行布尔检查。

jQuery toggle可用于切换项目的可见性，如下所示：$( ".target" ).toggle();

Answer 2

以逗号

使用多个选择器

 $("#ReportDataStatusOptions , #reportDataOptions").hide();
 $('#chkReportPermission , #chReportDataStatus , #chReportDataCummulative , .allowedUpload , .allowedDelete').attr('checked', false);

Answer 3

您可以使用模块化方法。

在函数中编写常用内容并在需要的地方调用它们。

在维护代码的同时也很有帮助。

这是你简单的代码：

$("#chReportData").click(function () {
    if ($(this)[0].checked) {
        $("#reportDataOptions").show();
    } else {
        hide_ReportDataStatusOptions();
        $("#reportDataOptions").hide();
        uncheck_chReportRbtns();
        uncheckAllowedRbtns();
    }
});

$("#chReportDataStatus").click(function () {
    if ($(this)[0].checked) {
        $("#ReportDataStatusOptions").show();
    } else if ($('#chReportDataCummulative').is('checked')) {
        hide_ReportDataStatusOptions();
        uncheckAllowedRbtns();
    } else {
        hide_ReportDataStatusOptions();
        uncheckAllowedRbtns();
    }
});

以及相应的功能：

function uncheck_AllowedRbtns(){
    $('.allowedUpload, .allowedDelete').attr('checked', false);    
}
function uncheck_chReportRbtns(){
    var txt = ['Permission', 'DataStatus', 'DataCummulative'];
    for(var i=0; i<txt.length; i++){
        $('#chReport'+txt[i]).attr('checked', false);
    }
}
function hide_ReportDataStatusOptions(){
    $("#ReportDataStatusOptions").hide();
}

更简单的展示，隐藏和展示方式禁用元素

3 个答案: