减少 jQuery 中 if 查询的数量

在我的网站中，用户可以输入两个输入。输入 1和输入2。

所以我必须用这两个数字计算差.

difference =input1-input2

因此，如果差异大于700，我必须应用红色请参阅以下内容。

dIFFERENCE > 700 = red
dIFFERENCE > 800 = blue
dIFFERENCE > 900 = green
dIFFERENCE > 1000 = white
dIFFERENCE > 1100 = yellow
dIFFERENCE > 1200 = orange
dIFFERENCE > 1300 = purple
etc.. UP TO dIFFERENCE > 5000 = other color

所以在这里我写的是下面的jquery，

var difference= $(".input1")-$(".input2");
if(difference>700){
$(".result").css("color","red");
}
if(difference>800){
$(".result").css("color","blue");
}
etc

有没有简单的方法来减少这个查询？就像我可以将颜色存储在数组中，并根据差异获取结果等。

请帮忙

编辑

我尝试的是

var difference= $(".input1")-$(".input2");
if(difference >700 && difference<=800){
difference=700;
}else if(difference>=800 && difference<=900 ){
difference=800;
}else if(difference>=900 && difference<=1000 ){
difference=900;
}else if(difference>=1000 && difference<=1100 ){
difference=1000;
}
...
else if(difference>=4900 && difference<=5000 ){
difference=4900;
}

var differnce_array =[];
difference_array[700]="red";
difference_array[800]="blue";
difference_array[900]="green";
difference_array[1000]="white";
etc...

还是查询太多了。所以请帮助优化此代码

在这种情况下，我将创建一个字典，其中键表示阈值并将差异四舍五入到数百，然后在字典中查找该键：

var diff = 789; // your value
var diffs = {700: 'red', 800: 'blue', 900: 'green'}; //etc
var diffcol = Math.floor(diff/100)*100; //Floor down to hundreds
if(diffcol in diffs) console.log(diffs[diffcol]); //Validation

第一种方法你使用哈希表，它有点像 c# 或 java 中的哈希集，您只需将键与值配对：

var hash = {
700:"red",
800:"blue",
900:"green",
//etc...
};

这就是你获得颜色的方法：

var difference= $(".input1")-$(".input2");
roundedDifference = Math.floor(difference/100)*100  
var color = hash[roundedDifference];
//This will be your color

第二种方法：

您可以将数字四舍五入，以便只得到百分身，即 100,200,300,400，等等。然后你可以使用 switch 语句：

var difference= $(".input1")-$(".input2");
roundedDifference = Math.floor(difference/100)*100  
switch(roundedDifference) {
case 700:
$(".result").css("color","red");
break;
case 800:
$(".result").css("color","blue");
break;
case 900:
$(".result").css("color","green");
break;
case 1000:
$(".result").css("color","white");
break;
case 1100:
$(".result").css("color","yellow");
break;
case 1200:
$(".result").css("color","orange");
break;
case 1300:
$(".result").css("color","purple");
break;
case ... until 5000
break;
default:
console.log("difference not within range of 700-5000"
}

您最多可以执行此操作 5000。

这是适合您的工作代码：

function submit() {
var difference = $(".input1").val() - $(".input2").val();
console.log(difference)
function getColor() {
var color;
switch (difference) {
case 700:
color = "red";
break;
case 800:
color = "blue";
break;
case 900:
color = "green";
break;
case 1000:
color = "white";
break;
case 1100:
color = "yellow";
break;
case 1200:
color = "orange"; 
break;
case 1300:
color = "purple";
break;
default:
color = "magenta"
}
return color
}
$(".result").css("color", getColor(difference));
$(".result").html("The color is: "+ getColor(difference));
}

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<input type="text" class="input1" placeholder="input1">
<input type="text" class="input2" placeholder="input2">
<button onclick="submit()">Difference</button>
<div class="result"> This changes color</div>
</body>
</html>

请运行上面的代码片段

这是一个有效的演示

相关内容

最新更新

热门标签：