减少 jQuery 中的 if 查询次数答案

【问题标题】：Reduce the number of if query in jQuery减少 jQuery 中的 if 查询次数
【发布时间】：2018-05-17 19:06:48
【问题描述】：

在我的网站用户可以输入两个输入。 输入 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...

仍然是太多的查询。所以请帮忙优化这段代码

【问题讨论】：

“就像我可以将颜色存储在一个数组中并根据差异我可以获取结果”。你试过了吗？
对不起，我不知道热申请。对不起。我尝试在数组中查找颜色
您是否在寻找如何创建文字数组（在您的代码中静态定义的）？你真的应该尝试自己做，没有其他方法可以学习。
@abilasher 我想这就是你要找的东西w3schools.com/js/js_switch.asp
请查看更新后的问题

标签： javascript jquery optimization

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

第一种方法 您使用哈希表，它有点像 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 个。

【讨论】：

【解决方案3】：

这是一个适合你的工作代码：

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>

请运行上面的sn-p

Here is a working DEMO

【讨论】：

@abilash er，我做了一个动态函数，它接受值并更改color，我也创建了一个演示。
真的谢谢你的朋友。但是请您看一下已接受的答案。这是更简单的方法。
是的，我已经检查过了，如果它对你有用，你可以投票赞成我的答案。 :-)