顯示，隱藏和禁用元素

我目前有這個代碼&尋找展示的簡單和更短的方式，隱藏&禁用我的元素更簡單的方法...顯示，隱藏和禁用元素

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

它正常工作，我「M只是尋找一個更簡單的方法...如果你知道一個較短&更簡單的方法，請分享...

來源

2014-03-27 Norris

張貼在http://codereview.stackexchange.com/ –

這個問題似乎是題外話因爲它是關於代碼優化 –

好吧...沒問題...謝謝你讓我知道！ – Norris

使用muliple選擇用逗號

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

來源

2014-03-27 09:56:44

而不是使用show和hide用布爾檢查您可以使用toggle的。

jQuery toggle可以用來對一個項目進行切換這樣的可見性：$(".target").toggle();

來源

2014-03-27 09:56:24

這也適用...非常感謝！ – Norris

但是'toggle'的一個問題是，它會切換'show \ hide' ...不檢查它是否隱藏或不... – Norris

你可以用模塊化的方法去。

將常用的東西寫在函數中，並在需要時調用它們。

在維護代碼時也是有幫助的。

這是您的簡單求代碼：

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

來源

2014-03-27 10:09:38 Mazzu

這也適用，我會盡量熟悉模塊化方法..謝謝您！ – Norris

顯示，隱藏和禁用元素

回答

相關問題