Question

有没有办法缩短这段代码。它运行得很好但是太长了。它的作用是，有两个下拉列表。用户必须在下拉菜单中选择，然后在两个文本框中显示一个值。＆＃34;排序＆＃34;扭曲就是这样，文本框中的值不是常量，它取决于菜单中的选定选项。例如，如果用户在第一个选择标记上选择Al，而在第二个选择标记上选择LP，则文本框上将显示一个值。如果在第一个标签上它仍然是Al但在第二个LLP上，则文本框中的值将会改变。类似的东西。

我真的开始学习这件事了。这就是为什么我的编码就是这样的原因。所以任何建议都是受欢迎的。

$("#state").change(function(){
    if($(this).val() == 'AL'){
        $("#entity").change(function(){
            if($(this).val() == 'LP'){
                    $('#sff').val('$186.00');
                    $('#osf').val('$119.00');
                    $("#desc").hide();
                    changeval();
            }else if($(this).val() == 'LLC'){
                $('#sff').val('$186.00');
                $('#osf').val('$99.00');
                $("#desc").show();
                $("#alLLC").show();
                changeval();
            }else if($(this).val() == 'LLP'){
                $('#sff').val('$186.00');
                $('#osf').val('$119.00');
                $("#desc").hide();
                changeval();
            }else if($(this).val() == 'NPC'){
                $('#sff').val('$186.00');
                $('#osf').val('$99.00');
                $("#desc").show();
                $("#alNPC").show();
                changeval();
            }else if($(this).val() == 'PC'){ 
                $('#sff').val('$186.00');
                $('#osf').val('$99.00');
                $("#desc").show();
                $("#alPC").show();
                changeval();
            } else{
                 $('#sff').val('$186.00');
                $('#osf').val('$99.00');
                $("#desc").show();
                $("#alPC").show();
                changeval();
            }
});
    }
    if($(this).val() == 'AK'){
        $("#entity").change(function(){
            if($(this).val() == 'LP'){
                    $('#sff').val('$50.00');
                    $('#osf').val('$119.00');
                    $("#desc").hide();
                    changeval();
            }else if($(this).val() == 'LLC'){
                $('#sff').val('$250.00');
                $('#osf').val('$99.00');
                $("#desc").hide();
                changeval();
            }else if($(this).val() == 'LLP'){
                $('#sff').val('$250.00');
                $('#osf').val('$119.00');
                $("#desc").hide();
                changeval();
            }else if($(this).val() == 'NPC'){
                $('#sff').val('$50.00');
                $('#osf').val('$99.00');
                $("#desc").hide();
                changeval();
            }else if($(this).val() == 'PC'){ 
                $('#sff').val('$250.00');
                $('#osf').val('$99.00');
                $("#desc").hide();
                changeval();
            } else{
                 $('#sff').val('$250.00');
                $('#osf').val('$99.00');
                $("#desc").hide();
                changeval();
            }
});

Answer 1

使用带有嵌套switch语句的单独函数。然后在对象中返回结果，然后进行更改：

$("#state").change(function(){
        var state=$(this).val();
        $("#entity").change(function(e){
           var changestuff = updateval(state, e);
           $('#sff').val(changestuff.sff);
           $('#osf').val(changestuff.osf);
           changeval();
        })
});

function updateval(state, entity){
    switch (state){
       case 'AL':
         switch (entity){
           case 'LP':
             var details ={sff:50,osf: 119};
             break;
           case 'LLP':
             var details ={sff:250,osf: 99};
             break;
           ... // all of the rest of the options for entities
           ...
           ...
           default:
             break;
         }
       case 'AK':
         // duplicate the format for 'AL' above
       ...
       ...
       default:
         break;
    }
    return details;
}

请注意;我还没有对此进行过测试，但这会向您展示如何在一个函数中实现。现在，如果将状态扩展为全部50（例如），则只需在案例函数中添加其他部分。

Answer 2

我会尝试将数据与逻辑分开，对于初学者来说：

$("#state").on('change', function(){
    var valuesPerState = {
        'AL': {
            'LP': {
                'sff': '$186.00',
                'osf': '$119.00',
            },
            'LLC': {
                'sff': '$186.00',
                'osf': '$99.00',
                'desc': true,
                'show': '#alLLC'
            },
            'LLP': {
                'sff': '$186.00',
                'osf': '$119.00'
            },
            'NPC': {
                'sff': '$186.00',
                'osf': '$99.00',
                'desc': true,
                'show': '#alNPC'
            },
            'PC': {
                'sff': '$186.00',
                'osf': '$99.00' ,
                'desc': true,
                'show': '#alPC'
            },
            'other': {
                'sff': '$186.00',
                'osf': '$99.00',
                'desc': true,
                'show': '#alPC'
            }
        },
        'AK': {
            'LP': {
                'sff': '$50.00',
                'osf': '$119.00'
            },
            'LLC': {
                'sff': '$250.00',
                'osf': '$99.00'
            },
            'LLP': {
                'sff': '$250.00',
                'osf': '$119.00'
            },
            'NPC': {
                'sff': '$50.00',
                'osf': '$99.00'
            },
            'PC': {
                'sff': '$250.00',
                'osf': '$99.00'
            },
            'other': {
                'sff': '$250.00',
                'osf': '$99.00'
            }
        }
    },
    state = $(this).val(),
    stateValues = valuesPerState[state];

    if(stateValues) {
        $('#entity').on('change', function(){
            var typeValues = stateValues[$(this).val()] || stateValues['other'];

            $('#sff').val(typeValues['sff']);
            $('#osf').val(typeValues['osf']);
            $("#desc").toggle(typeValues['desc']);

            if (typeValues['show']) {
                $(typeValues['show']).show();
            }
            changeval();
        });
    }
});

Answer 3

获取内部选择语句（检查LP，LLC等）并将其移动到自己的函数，在其中传递#entity的值。这将为您清理大量的东西。你甚至可以传递值（只看到那些改变了）。

Answer 4

使用switch语句可以避免永无止境的嵌套if语句。这将使代码可以轻松地为其他程序员和额外或嵌套条件可以轻松添加。

$("#state").change(function(){
    if($(this).val() == 'AL')
    {
       $("#entity").change(function(){
       switch ($(this).val())
       {
           case : 'LP'{
                    $('#sff').val('$186.00');
                    $('#osf').val('$119.00');
                    $("#desc").hide();                       
                      break;
            }
           case :  'LLC'{
                $('#sff').val('$186.00');
                $('#osf').val('$99.00');
                $("#desc").show();
                $("#alLLC").show();
                    break;
            }
           case :  'LLP'{
                $('#sff').val('$186.00');
                $('#osf').val('$119.00');
                $("#desc").hide();
                    break;
            }
           case :  'NPC'{
                $('#sff').val('$186.00');
                $('#osf').val('$99.00');
                $("#desc").show();
                $("#alNPC").show();
                    break;
            }
           case :  'PC'{ 
                $('#sff').val('$186.00');
                $('#osf').val('$99.00');
                $("#desc").show();
                $("#alPC").show();
                    break;
            }
           default {
                 $('#sff').val('$186.00');
                $('#osf').val('$99.00');
                $("#desc").show();
                $("#alPC").show();
                    break;
            }
        }//END of first Switch
    }//END of IF
    if($(this).val() == 'AK'){
        $("#entity").change(function(){
         switch ($(this).val())
       {
           case : 'LP'{
                    $('#sff').val('$50.00');
                    $('#osf').val('$119.00');
                    $("#desc").hide();
                    break;
            }
           case : 'LLC'{
                $('#sff').val('$250.00');
                $('#osf').val('$99.00');
                $("#desc").hide();
                break;
            }
           case :  'LLP'{
                $('#sff').val('$250.00');
                $('#osf').val('$119.00');
                $("#desc").hide();
                break;
            }
           case :  'NPC'{
                $('#sff').val('$50.00');
                $('#osf').val('$99.00');
                $("#desc").hide();
                break;
            }
           case :  'PC'){ 
                $('#sff').val('$250.00');
                $('#osf').val('$99.00');
                $("#desc").hide();
                break;
            } default {
                 $('#sff').val('$250.00');
                $('#osf').val('$99.00');
                $("#desc").hide();
                break;
            }
       };//END  of second switch
    }//End of IF Loop

在条件的开头和结尾添加注释以及它们的验证将有助于调试更容易

如果javascript和jquery，其他更短的代码

4 个答案: