Javascript 在for循环中使用jQuery更改divs css值

嘿！ 我正在写关于种植植物的剧本。我的问题是jquery、css部分。我有一个循环：

var i,elementWaterLevel, elementLifeLevel, elementFloweringLevel,floweringTime;

    for (i = 0; i < globalNumberOfPlants; i++)
    {
        elementWaterLevel = $("#waterLevel[plantId=" + globalData[i].plantId + "]");
        elementLifeLevel = $("#lifeLevel[plantId=" + globalData[i].plantId + "]");
        elementFloweringLevel = $("#floweringLevel[plantId=" + globalData[i].plantId + "]");

        floweringTime = Math.round((globalData[i].currentFloweringTime / globalData[i].marijuanaFloweringTime) * 200);
        elementWaterLevel.css("height", Math.round((globalData[i].currentWaterLevel) * 220));
        elementLifeLevel.css("height", Math.round((globalData[i].currentLifeLevel) * 220));
        elementFloweringLevel.css("width", floweringTime);

        if (globalData[i].currentLifeLevel == 0) {
            $("#littlePlantStatus[plantId=" + globalData[i].plantId + "]").css("border", "5px solid red");
        }
        else {
            if (globalData[i].currentFloweringTime / globalData[i].plantFloweringTime == 1) {
                $("#littlePlantStatus[plantId=" + globalData[i].plantId + "]").css("border", "5px solid green");
                $("#harvestThePlant[plantId=" + globalData[i].plantId + "]").show();
            }
            else {
                $("#littlePlantStatus[plantId=" + globalData[i].plantId + "]").css("border", "1px solid black");
                $("#harvestThePlant[plantId=" + globalData[i].plantId + "]").hide();
            }
        }
    }

---

因此对于第二个循环，jQuery无法找到元素。怎么了？

同一个id不能在同一个html页面中使用两次。如果它被使用不止一次，那么它与第一个元素一起工作

<div id="littlePlantStatus1" >
    <div class="waterStatus"><div class="waterLevel" ></div></div>
    <div class="lifeStatus"><div class="lifeLevel" ></div></div>
    <div class="floweringStatus"><div class="floweringLevel" ></div></div>
    <div class="plantActions">
        <input type="button" class="waterThaPlant"/><input type="button" class="addFertilizer"/><input type="button" class="checkThePlant" />
        <input type="button" class="harvestThePlan"style="display: none;" />
    </div>
</div>
<div id="littlePlantStatus2" >
    <div class="waterStatus"><div class="waterLevel" ></div></div>
    <div class="lifeStatus"><div class="lifeLevel" ></div></div>
    <div class="floweringStatus"><div class="floweringLevel" ></div></div>
    <div class="plantActions">
        <input type="button" class="waterThaPlant"/><input type="button" class="addFertilizer"/><input type="button" class="checkThePlant" />
        <input type="button" class="harvestThePlan"style="display: none;" />
    </div>
</div>

这应该行得通

var i,elementWaterLevel, elementLifeLevel, elementFloweringLevel,floweringTime;

    for (i = 0; i < globalNumberOfPlants; i++)
    {
        var parentDiv = $('#littlePlantStatus'+globalData[i].plantId);
        elementWaterLevel = parentDiv.find(".waterLevel");
        elementLifeLevel = parentDiv.find(".lifeLevel");
        elementFloweringLevel = parentDiv.find(".floweringLevel");

        floweringTime = Math.round((globalData[i].currentFloweringTime / globalData[i].marijuanaFloweringTime) * 200);
        elementWaterLevel.css("height", Math.round((globalData[i].currentWaterLevel) * 220));
        elementLifeLevel.css("height", Math.round((globalData[i].currentLifeLevel) * 220));
        elementFloweringLevel.css("width", floweringTime);

        if (globalData[i].currentLifeLevel == 0) {
            parentDiv.css("border", "5px solid red");
        }
        else {
            if (globalData[i].currentFloweringTime / globalData[i].plantFloweringTime == 1) {
                parentDiv.css("border", "5px solid green");
                parentDiv.find(".harvestThePlant").show();
            }
            else {
                $("#littlePlantStatus").css("border", "1px solid black");
                parentDiv.find(".harvestThePlant").hide();
            }
        }
    }

var i，元素水位，元素生命水平，元素开花水平，开花时间；
对于（i=0；i

这可能是由于ID重复造成的。在整个文档中，每个id（id=“myid”）都应该是唯一的。除此之外，我建议仔细检查

globalData

变量中的值

要获得更具体的帮助，您需要在JSFIDLE中发布代码的简化版本

---

此外，通过将类应用于js中的标记，而不是直接应用样式规则，您可以使您的生活更轻松。祝你好运

元素

id

属性需要是唯一的，或者不使用id的use类，而是使用类选择器，即：

$（“.waterLevel[plantId=1]”

谢谢：）我不知道

var i,elementWaterLevel, elementLifeLevel, elementFloweringLevel,floweringTime;

    for (i = 0; i < globalNumberOfPlants; i++)
    {
        var parentDiv = $('#littlePlantStatus'+globalData[i].plantId);
        elementWaterLevel = parentDiv.find(".waterLevel");
        elementLifeLevel = parentDiv.find(".lifeLevel");
        elementFloweringLevel = parentDiv.find(".floweringLevel");

        floweringTime = Math.round((globalData[i].currentFloweringTime / globalData[i].marijuanaFloweringTime) * 200);
        elementWaterLevel.css("height", Math.round((globalData[i].currentWaterLevel) * 220));
        elementLifeLevel.css("height", Math.round((globalData[i].currentLifeLevel) * 220));
        elementFloweringLevel.css("width", floweringTime);

        if (globalData[i].currentLifeLevel == 0) {
            parentDiv.css("border", "5px solid red");
        }
        else {
            if (globalData[i].currentFloweringTime / globalData[i].plantFloweringTime == 1) {
                parentDiv.css("border", "5px solid green");
                parentDiv.find(".harvestThePlant").show();
            }
            else {
                $("#littlePlantStatus").css("border", "1px solid black");
                parentDiv.find(".harvestThePlant").hide();
            }
        }
    }