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 [＆＃34; soil_h＆＃34;]总是一个数字。

简单的数学

       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

＆＃13;

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

＆＃13;

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

＆＃13;

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 )

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

我怎样才能减少if-else语句

5 个答案: