用两个最低的innerText值改变div的bg颜色(值是随机创建的)

Question

首先，如果这是一个愚蠢的问题，我很抱歉，我对JavaScript相当陌生，并且已经尝试了好几天了。

假设我有6节火车车厢(div)，它们有各自的id。

<div class="train">
    <div class="car" id = "car1">a</div>
    <div class="car" id = "car2">b</div>
    <div class="car" id = "car3">b</div>
    <div class="car" id = "car4">b</div>
    <div class="car" id = "car5">b</div>
    <div class="car" id = "car6">b</div>
</div>

我的脚本使用从0到160的随机数(每个火车车厢的乘客数量)生成这些div的innerText。我想改变乘客最少的两辆车的背景色。

首先，我创建一个新的Object of trainCar来包含关于乘客人数和车号的信息。

var passengers = document.querySelectorAll(".car");
var trainCar = {};
for (let i = 0; i <= passengers.length-1; i++) {
    passengers[i].innerHTML = getRandomNumber(); 
    trainCar[i] = {
        numberOfPassengers: passengers[i].innerHTML,
        carId: passengers[i].id,
    }
}

这将在我的主对象trainCar(这是console.log)中创建多个对象:

{0: {…}, 1: {…}, 2: {…}, 3: {…}, 4: {…}, 5: {…}}
0: {numberOfPassengers: "17", carId: "car1"}
1: {numberOfPassengers: "87", carId: "car2"}
2: {numberOfPassengers: "106", carId: "car3"}
3: {numberOfPassengers: "157", carId: "car4"}
4: {numberOfPassengers: "154", carId: "car5"}
5: {numberOfPassengers: "56", carId: "car6"}

所以这就是我被困的地方。我可以改变其中一辆车的背景颜色使用:document.getElementById(trainCar[2].carId).style="background-color: grey";但是我不知道如何匹配innerHTML的最低值与相应的id和改变这个id的背景(更不用说最低的两个)。

Answer 1

可以跟踪for循环中的2 min值。您还需要跟踪与这些最小值对应的id。您可以在下面看到一个工作代码片段:

var passengers = document.querySelectorAll(".car");
var trainCar = {};
let min = Infinity;
let min2 = Infinity;
let minId, min2Id;
for (let i = 0; i <= passengers.length-1; i++) {
    const value = Math.floor(Math.random() * 100); 
    if(value < min){
      min2 = min;
      min2Id = minId;
      min = value;
      minId = i;
    } else if (value < min2){
      min2 = value;
      min2Id = i;
    }
    passengers[i].innerHTML = value;
    trainCar[i] = {
        numberOfPassengers: value,
        carId: passengers[i].id,
    }
}
passengers[minId].style.backgroundColor = 'grey';
passengers[min2Id].style.backgroundColor = 'grey';

<div class="train">
    <div class="car" id = "car1">a</div>
    <div class="car" id = "car2">b</div>
    <div class="car" id = "car3">b</div>
    <div class="car" id = "car4">b</div>
    <div class="car" id = "car5">b</div>
    <div class="car" id = "car6">b</div>
</div>