如何减少if-else语句

是否有其他方法可以减少if-else语句？该代码将通过从数据库获取整数来更改图片。我试着减少这段代码。如何减少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'); 
    }

来源

2016-03-01 Papa.John

使用开关：https：//developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch –

@ZakariaAcharki但你不能使用范围值为'case'的语句... –

var v = [21,42,63,84,105,126,147]; var count = 1; （v）中的val [“soil_h”] { if（val） count ++; } else {（“＃ground”）。attr（'src'，'pic/ground'+ count +'。png'）; } – RRR

使用/（师）的所有值都多的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..

来源

2016-03-01 11:48:38 Rayon

一种方法是链三元运营商：

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);

来源

2016-03-01 11:48:58

选择器可能应该是'$（“＃ground”）'而不是'$（“$ ground”）' –

@mef固定，谢谢。 –

感谢您的建议@Dmytro Shevchenko –

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" />

来源

2016-03-01 11:49:27

['Array.prototype.find（）']（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find#Browser_compatibility ）的兼容性有限 – Andreas

它是一个简单的数学，你不需要编写太多的代码。看下面我的回答 – zakaiter

感谢您的建议@Bob海绵和每个人。 –

寻找靠近你的代码，我想象它只有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');

来源

2016-03-01 11:59:58 zakaiter

谢谢您的建议@zakaiter –

使用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)

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

来源

2016-03-01 12:14:24

谢谢您的建议@ mef –

如何减少if-else语句

回答

相关问题