javascript - 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 data = $(this).find('option:selected').data();

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

这通过将匹配元素 (option:selected) 上的所有 data-* 属性抓取到以下格式的对象中来工作：

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

然后，您可以使用 for 循环遍历该对象，该循环将对象属性的左侧（即：yxs、ys 等）存储到键变量中。然后，您可以在循环中获取相应的元素：

$("#" + key)

并根据表达式的评估将 disabled 属性设置为 true 或 false：

data[key] == ''

根据上面的对象示例将转换为

data['ys'] == '' 

或者

data['yxs'] == '' 

等等

Answer 2

尝试

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