Javascript js函数中的多个if/else语句用于唯一输入禁用

我提出这个问题是因为我还在学习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);
    }
});

试一试

另一个版本可能是

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

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

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

试一试

另一个版本可能是

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

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

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

---

您可以尝试这样做：

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

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

其工作原理是将匹配元素（选项：selected）上的所有data-*属性捕获到以下格式的对象中：

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

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

$("#" + key)

并根据表达式的求值将禁用的属性设置为true或false：

data[key] == ''

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

data['ys'] == '' 

或

---

等等。

您可以尝试这样做：

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

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

其工作原理是将匹配元素（选项：selected）上的所有data-*属性捕获到以下格式的对象中：

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

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

$("#" + key)

并根据表达式的求值将禁用的属性设置为true或false：

data[key] == ''

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

data['ys'] == '' 

或

---

等等。

同时发布你的html代码。+1感谢你知道“你在做什么”！同时发布你的html代码。+1表示知道“你在做什么”！你可以进一步简化。删除if/else，改为使用：

$（“#”+键）.prop（“已禁用”，数据[键]=”）酷，看起来不错！我将删除我以前的评论，并很快删除此评论，以清理混乱。：-）这可能有助于解释如何等效地工作。也许这是显而易见的；我不使用jQuery。您可以进一步简化它。删除if/else，改为使用：
$（“#”+键）.prop（“已禁用”，数据[键]=”）酷，看起来不错！我将删除我以前的评论，并很快删除此评论，以清理混乱。：-）这可能有助于解释如何等效地工作。也许这是显而易见的；我不使用jQuery。