javascript - 减少代码并简化 IF-THEN-ELSE block 的逻辑

Question

我很难理解如何最好地利用 if else 语句。例如:

$('.qty_input').keyup(function () {
var qtyValue = $('.qty_input').val();
    if (qtyValue >= number1 && qtyValue <= number10){
        if ($('option[value="2"]').parent("span").length) {$('option[value="2"]').unwrap('<span/>')}
        if ($('option[value="3"]').parent("span").length) {$('option[value="3"]').unwrap('<span/>')}
        if ($('option[value="4"]').parent("span").length) {$('option[value="4"]').unwrap('<span/>')}
        if ($('option[value="1"]').parent("span").length) {$('option[value="1"]').unwrap('<span/>')}
        if ($('option[value="2"]').parent("span").length) {}else {$('option[value="2"]').wrap('<span/>')}
        if ($('option[value="3"]').parent("span").length) {}else {$('option[value="3"]').wrap('<span/>')}
        if ($('option[value="4"]').parent("span").length) {}else {$('option[value="4"]').wrap('<span/>')}
       }
       else if (qtyValue >= number2 && qtyValue <= number20){
        if ($('option[value="2"]').parent("span").length) {$('option[value="2"]').unwrap('<span/>')}
        if ($('option[value="3"]').parent("span").length) {$('option[value="3"]').unwrap('<span/>')}
        if ($('option[value="4"]').parent("span").length) {$('option[value="4"]').unwrap('<span/>')}
        if ($('option[value="1"]').parent("span").length) {$('option[value="1"]').unwrap('<span/>')}
        if ($('option[value="1"]').parent("span").length) {}else {$('option[value="1"]').wrap('<span/>')}
        if ($('option[value="3"]').parent("span").length) {}else {$('option[value="3"]').wrap('<span/>')}
        if ($('option[value="4"]').parent("span").length) {}else {$('option[value="4"]').wrap('<span/>')}
       }
       else if (qtyValue >= number3 && qtyValue <= number30){
        if ($('option[value="2"]').parent("span").length) {$('option[value="2"]').unwrap('<span/>')}
        if ($('option[value="3"]').parent("span").length) {$('option[value="3"]').unwrap('<span/>')}
        if ($('option[value="4"]').parent("span").length) {$('option[value="4"]').unwrap('<span/>')}
        if ($('option[value="1"]').parent("span").length) {$('option[value="1"]').unwrap('<span/>')}
        if ($('option[value="2"]').parent("span").length) {}else {$('option[value="2"]').wrap('<span/>')}
        if ($('option[value="1"]').parent("span").length) {}else {$('option[value="1"]').wrap('<span/>')}
        if ($('option[value="4"]').parent("span").length) {}else {$('option[value="4"]').wrap('<span/>')}
       }
       else if (qtyValue >= number4 && qtyValue <= 999999){
        if ($('option[value="2"]').parent("span").length) {$('option[value="2"]').unwrap('<span/>')}
        if ($('option[value="3"]').parent("span").length) {$('option[value="3"]').unwrap('<span/>')}
        if ($('option[value="4"]').parent("span").length) {$('option[value="4"]').unwrap('<span/>')}
        if ($('option[value="1"]').parent("span").length) {$('option[value="1"]').unwrap('<span/>')}
        if ($('option[value="2"]').parent("span").length) {}else {$('option[value="2"]').wrap('<span/>')}
        if ($('option[value="3"]').parent("span").length) {}else {$('option[value="3"]').wrap('<span/>')}
        if ($('option[value="1"]').parent("span").length) {}else {$('option[value="1"]').wrap('<span/>')}
       }});

有没有人对我如何更新它有任何建议，以使其更清洁、更有效？谢谢。

Answer 1

查看您的代码，我注意到一些模式可以转换为函数，或立即带走。

$('.qty_input').keyup(function () {

    var qtyValue = $('.qty_input').val();
    // these 4 statements are executed no matter what. 
    // there is no point in duplicating them in each if-then block
    for(var i=1; i<=4; i++) {
        if ($('option[value="'+i+'"]').parent("span").length) {
           $('option[value="'+i+'"]').unwrap('<span/>');
        }
    }


         // the pattern for the next part is simple
         // execute 4 statements of jQuery but exclude one part per each if-then block
         if (qtyValue >= number1 && qtyValue <= number10) { exclude(1); }
    else if (qtyValue >= number2 && qtyValue <= number20) { exclude(2); }     
    else if (qtyValue >= number3 && qtyValue <= number30) { exclude(3); }        
    else if (qtyValue >= number4 && qtyValue <= 999999)   { exclude(4); }        

    function exclude(num) {
        // loop from 1 to 4 to execute the same for each part
        // but only exclude the one statement that is passed 
        // into the function
        for(var i=1; i<=4; i++) {
            if(i!=num) {
                if (!$('option[value="'+i+'"]').parent("span").length) {
                     $('option[value="'+i+'"]').wrap('<span/>')
                }
            }
        }
    }
});