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] == '');            
    }
});

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

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

然后,您可以使用for循环遍历此对象,该循环将对象属性的左侧(即:yxs,ys等)存储到键变量中.在循环中,您可以获取相应的元素:

$("#" + key)

并根据表达式的计算将disabled属性设置为true或false:

data[key] == ''

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

data['ys'] == '' 

要么

data['yxs'] == '' 

等等