Question

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

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

Answer 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

Answer 2

1ST APPROACH 您使用哈希表，它有点像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

2ND APPROACH：

你可以对数字进行舍入，这样你就可以获得数量为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。

Answer 3

以下是适合您的工作代码：

＆＃13;

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

＆＃13;

<!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>

＆＃13;

请运行以上代码段

Here is a working DEMO

减少jQuery中if查询的次数

3 个答案: