js函數中的多個if/else語句，用於唯一輸入禁用

Question

我提起這個，因爲我仍在學習javascript。我幾乎肯定這不是寫這個函數的正確方法，但它有效。這真是醜陋，但它起作用。只要看一下腳本，你能看到一個明顯的疏漏，它會使代碼變得更整潔，更多語義？

$('#model').on('change', function(){ 
    var yxs = $('#model').find('option:selected').attr('data-yxs'); 
    var ys = $('#model').find('option:selected').attr('data-ys'); 
    var ym = $('#model').find('option:selected').attr('data-ym'); 
    var yl = $('#model').find('option:selected').attr('data-yl'); 
    var yxl = $('#model').find('option:selected').attr('data-yxl'); 
    var xs = $('#model').find('option:selected').attr('data-xs'); 
    var s = $('#model').find('option:selected').attr('data-s'); 
    var m = $('#model').find('option:selected').attr('data-m'); 
    var l = $('#model').find('option:selected').attr('data-l'); 
    var xl = $('#model').find('option:selected').attr('data-xl'); 
    var xxl = $('#model').find('option:selected').attr('data-xxl'); 
    var xxxl = $('#model').find('option:selected').attr('data-xxxl'); 
    var xxxxl = $('#model').find('option:selected').attr('data-xxxxl'); 
    if (yxs != '') { 
     $('#yxs').prop('disabled', false); 
    } 
    else { 
     $('#yxs').prop('disabled', true); 
    } 
    if (ys != '') { 
     $('#ys').prop('disabled', false); 
    } 
    else { 
     $('#ys').prop('disabled', true); 
    } 
    if (ys != '') { 
     $('#ym').prop('disabled', false); 
    } 
    else { 
     $('#ym').prop('disabled', true); 
    } 
    if (ys != '') { 
     $('#yl').prop('disabled', false); 
    } 
    else { 
     $('#yl').prop('disabled', true); 
    } 
    if (ys != '') { 
     $('#yxl').prop('disabled', false); 
    } 
    else { 
     $('#yxl').prop('disabled', true); 
    } 
    if (ys != '') { 
     $('#xs').prop('disabled', false); 
    } 
    else { 
     $('#xs').prop('disabled', true); 
    } 
    if (ys != '') { 
     $('#s').prop('disabled', false); 
    } 
    else { 
     $('#s').prop('disabled', true); 
    } 
    if (ys != '') { 
     $('#m').prop('disabled', false); 
    } 
    else { 
     $('#m').prop('disabled', true); 
    } 
    if (ys != '') { 
     $('#l').prop('disabled', false); 
    } 
    else { 
     $('#l').prop('disabled', true); 
    } 
    if (ys != '') { 
     $('#xl').prop('disabled', false); 
    } 
    else { 
     $('#xl').prop('disabled', true); 
    } 
    if (ys != '') { 
     $('#xxl').prop('disabled', false); 
    } 
    else { 
     $('#xxl').prop('disabled', true); 
    } 
    if (ys != '') { 
     $('#xxxl').prop('disabled', false); 
    } 
    else { 
     $('#xxxl').prop('disabled', true); 
    } 
    if (ys != '') { 
     $('#xxxxl').prop('disabled', false); 
    } 
    else { 
     $('#xxxxl').prop('disabled', true); 
    } 
}); 

Answer 1

嘗試

$('#model').on('change', function(){ 
    var $selcted = $('#model').find('option:selected'); 

    $('#yxs').prop('disabled', $selcted.data('yxs') == ''); 
    $('#ys').prop('disabled', $selcted.data('ys') == ''); 
    $('#ym').prop('disabled', $selcted.data('ym') == ''); 
    $('#yl').prop('disabled', $selcted.data('yl') == ''); 
    $('#xs').prop('disabled', $selcted.data('xs') == ''); 
    $('#s').prop('disabled', $selcted.data('s') == ''); 
    $('#m').prop('disabled', $selcted.data('m') == ''); 
    $('#l').prop('disabled', $selcted.data('l') == ''); 
    $('#xl').prop('disabled', $selcted.data('xl') == ''); 
    $('#xxl').prop('disabled', $selcted.data('xxl') == ''); 
    $('#xxxl').prop('disabled', $selcted.data('xxxl') == ''); 
    $('#xxxxl').prop('disabled', $selcted.data('xxxxl') == ''); 
    $('#xl').prop('disabled', $selcted.data('xl') == ''); 
    $('#xl').prop('disabled', $selcted.data('xl') == ''); 
    $('#xl').prop('disabled', $selcted.data('xl') == ''); 
}); 

另一個版本可能是

$('#model').on('change', function(){ 
    var $selcted = $('#model').find('option:selected'); 

    function setDisabled(key){ 
     $('#' + key).prop('disabled', $selcted.data(key) == ''); 
    } 

    setDisabled('yxs'); 
    setDisabled('ys'); 
    .... 
}); 

Answer 2

你可以嘗試做這種方式：

$('#model').on('change', function(){ 
    var data = $(this).find('option:selected').data(); 

    for (var key in data) {    
     $("#" + key).prop("disabled", data[key] == '');    
    } 
}); 

這是通過搶佔了所有數據 - *屬性在匹配元素上（選項：選中）插入格式的一個目的：YXS，YS，等）進入的關鍵變量：

{ 
    yxs : 'some value', 
    ys : '', 
    etc. 
} 

然後可以通過使用for循環，其存儲對象屬性的左側（即，該對象迭代。內的循環，可以然後抓住相應的元件：

$("#" + key) 

並設置禁用屬性基於表達式的評估爲真或假的：

data[key] == '' 

其中每對象上面的例子將翻譯成

data['ys'] == '' 

或

data['yxs'] == '' 

等