我如何减少if-else语句

Question

还有其他方法可以减少此if-else语句吗？ 此代码将通过从数据库获取整数来更改图片。 我尝试减少此代码。

  if (val["soil_h"] < 21){
       $("#ground").attr('src', 'pic/ground1.png');
    } else if (val["soil_h"] < 42){
       $("#ground").attr('src', 'pic/ground2.png');
    } else if (val["soil_h"] < 63){
       $("#ground").attr('src', 'pic/ground3.png');
    } else if (val["soil_h"] < 84){
       $("#ground").attr('src', 'pic/ground4.png');
    } else if (val["soil_h"] < 105){
       $("#ground").attr('src', 'pic/ground5.png');
    } else if (val["soil_h"] < 126){
       $("#ground").attr('src', 'pic/ground6.png');
    } else if (val["soil_h"] < 147){
       $("#ground").attr('src', 'pic/ground7.png');
    } else {
       $("$ground").attr('src', 'pic/ground8.png');
    }

Answer 1

使用/ （除法），因为所有值都是21倍数

尝试这个：

var value=val["soil_h"]/21;
$("#ground").attr('src', 'pic/ground"'+(value % 1 === 0 ? value : 8)+'".png'); //If value is not multiple of 21, default image is set..

Answer 2

想到的一种方法是链接三元运算符：

var soil = val["soil_h"];

var imagePath =
    soil < 21  ? 'pic/ground1.png' :
    soil < 42  ? 'pic/ground2.png' :
    soil < 63  ? 'pic/ground3.png' :
    soil < 84  ? 'pic/ground4.png' :
    soil < 105 ? 'pic/ground5.png' :
    soil < 126 ? 'pic/ground6.png' :
    soil < 147 ? 'pic/ground7.png' :
                 'pic/ground8.png';

$("#ground").attr('src', imagePath);

Answer 3

看起来很接近您的代码，我只能看到它的21的倍数。因此，这是我在假设val [“ soil_h”]始终为数字的情况下编写的。

简单数学

       var x = parseInt(val["soil_h"]/21);
      if(x==0){
       x=1;
      }else if(x>8){
        x=8;
      }


       $("#ground").attr('src', 'pic/ground'+x+'.png');

Answer 4

 var val = { soil_h: 43 }; var pics = [ { url: 'pic/ground1.png', maxHeight: 21 }, { url: 'pic/ground2.png', maxHeight: 42 }, { url: 'pic/ground3.png', maxHeight: 63 }, { url: 'pic/ground4.png', maxHeight: 84 }, { url: 'pic/ground5.png', maxHeight: 105 }, { url: 'pic/ground6.png', maxHeight: 126 }, { url: 'pic/ground7.png', maxHeight: 147 }, { url: 'pic/ground8.png', maxHeight: Number.MAX_VALUE }, ]; $("#ground").attr('src', pics.find(function(pic) { return val["soil_h"] < pic.maxHeight; }).url); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <img id="ground" /> 

Answer 5

使用switch另一种可能性：

var imageName
    , soil = val["soil_h"]

switch(true) {
    case soil < 21:
        imageName = 'ground1.png'
        break
    case soil < 42:
        imageName = 'ground2.png'
        break
    case soil < 63:
        imageName = 'ground3.png'
        break
    case soil < 84:
        imageName = 'ground4.png'
        break
    case soil < 105:
        imageName = 'ground5.png'
        break
    case soil < 126:
        imageName = 'ground6.png'
        break
    case soil < 147:
        imageName = 'ground7.png'
        break
    default:
        imageName = 'ground8.png'
        break
}

$('#ground').attr('src', 'pic/' + imageName )

PS请注意，您共享的代码中最后一条语句的选择器看起来不正确：可能应该是$("#ground")而不是$("$ground")