用于在范围之间循环if的Javascript

Question

var data = [
   {
     color: "black"
     width: 0
    },
   {
     color: "black"
     width: 50
    },
   {
     color: "black"
     width: 100
    },
]

Case:

The function accepts an input which is a number. This number needs to be compared which data point it is within.

Conditions:

We know how much it will increase everytime. In this case it is 50.

We do not know how MANY objects there are. In this case there are 3.

It always starts at 0.

This is a static function that could accomplish it (input = 55):

loopThis(input){
    if(input < 50){
        for(var i in data){
         data[i].color = "black";
        }
        data[0].color = "red";
    }else if(input > 50 && input < 100){
        for(var i in data){
         data[i].color = "black";
        }
        data[1].color = "red";
    }else{
        for(var i in data){
         data[i].color = "black";
        }
        data[2].color = "red";
    }
}

This would cause the second data object (data[1]) to become red and the rest will be black.

How take the conditions above and how can I make this code dynamic?

This wouldn't work if we had 4 objects in the array. And we can't know how many if conditions to write every time.

Answer 1

Try this code.

function loopThis(input){
    for(var i in data){
        data[i].color = "black";
    }
    var tmp = Math.floor(input/50);
    data[tmp].color = "red";
}

The tmp variable will give you the index to be marked red (for example if input is 51, tmp = 1; input 160, tmp = 3). That should solve the problem I guess.