Javascript 减少代码并简化IF-THEN-ELSE块的逻辑

我很难理解如何最好地利用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/>')}
       }});

$（'.qty\u input'）.keyup（函数（）{
var qtyValue=$（'.qty_input'）.val（）；
如果（qtyValue>=number1&&qtyValue=number2&&qtyValue=number3&&qtyValue=number4&&qtyValue一个选项是创建jQuery集合的对象（对于每个
值=
）。因为展开过程对于每个外部
qtyValue
条件都是相同的，所以您可以无条件地运行该部分代码，方法是迭代对象的值并
unwrap
ping（如果项的父项是span）。然后，制作一个函数，将
包裹时要忽略的
值作为参数ping，并对没有该值的对象的值进行迭代

例如，如果您可以将独立的
number 35;
变量更改为一个范围数组，也会很好

[
  [10, 20], // [number1, number10]
  [21, 30], // [number2, number20]

这不仅有助于在定义这些范围时使您的代码更简洁，还可以使
更容易。找到要调用
wrap
的相应索引-将结尾的四个
if
/
else if
语句替换为如下内容：

const indexToIgnore = 1 + ranges.findIndex(([min, max]) => qtyValue >= min && qtyValue <= max);
wrap(indexToIgnore);

const indexToIgnore=1+范围。findIndex（（[min，max]）=>qtyValue>=min&&qtyValue{
if（选项父项（“跨度”）长度）{
选项。展开（“”）
}
});
函数换行（keyToIgnore）{
keyToIgnore=String（keyToIgnore）；//对象属性是字符串
对象。条目（选项）
.filter（（[key]）=>key！==keyToIgnore）
.forEach（（[选项]）=>{
如果（！option.parent（“span”）.length）{
选项。换行（“”）
}
});
}
const indexToIgnore=1+ranges.findIndex（[min，max]）=>qtyValue>=min&&qtyValue查看您的代码，我注意到一些模式可以转换为函数，或者立即删除

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

$（'.qty\u input'）.keyup（函数（）{
var qtyValue=$（'.qty_input'）.val（）；
//无论发生什么情况，都会执行这4条语句。
//在每个if-then块中复制它们是没有意义的
对于（var i=1；i=number1&&qtyValue=number2&&qtyValue=number3&&qtyValue=number4&&qtyValue使用开关而不是if如果
的顺序重要吗？HTML看起来像什么？不应该
选项只有
，
或
父项，而不是
span
？我想知道为什么
在同一个节点上展开
，然后紧接着展开
。如何排除每个条件的一个值？很抱歉，我没有直接使用Javascript，我只接受了jQuery。我可以理解你的函数wrap（keyToIgnore）。感谢您的努力。jQuery是Javascript-jQuery只是一个Javascript库，它运行在Javascript代码和语法上，并使用Javascript代码和语法与之交互：）
$('.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/>')
                }
            }
        }
    }
});