javascript - 在 for 循环中使用 jQuery 更改 div css 值

Question

喂! 我正在写关于种植植物的剧本。我的问题是 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();
            }
        }
    }

globalData 是一个二维 json 对象。我将植物的详细信息存储在里面。

globalNumberOfPlants 是植物的数量。

在第一个循环(plantId = 1)中一切正常，但在第二个循环(或第三个循环等)(plantId = 2)中，css没做什么。我检查了 javascript 计算数据的循环内的其他变量，它们是正确的，但 css 没有显示它们。

我的 html 代码:

<div id="littlePlantStatus" plantId="1">
                    <div id="waterStatus"><div id="waterLevel" plantId="1"></div></div>
                    <div id="lifeStatus"><div id="lifeLevel" plantId="1"></div></div>
                    <div id="floweringStatus"><div id="floweringLevel" plantId="1"></div></div>
                    <div id="plantActions">
                        <input type="button" id="waterThaPlant"/><input type="button" id="addFertilizer"/><input type="button" id="checkThePlant" />
                        <input type="button" id="harvestThePlan"style="display: none;" plantId="1"/>
                    </div>
                </div>
<div id="littlePlantStatus" plantId="2">
                    <div id="waterStatus"><div id="waterLevel" plantId="2"></div></div>
                    <div id="lifeStatus"><div id="lifeLevel" plantId="2"></div></div>
                    <div id="floweringStatus"><div id="floweringLevel" plantId="2"></div></div>
                    <div id="plantActions">
                        <input type="button" id="waterThaPlant"/><input type="button" id="addFertilizer"/><input type="button" id="checkThePlant" />
                        <input type="button" id="harvestThePlan"style="display: none;" plantId="2"/>
                    </div>
                </div>

所以对于第二个循环，jQuery 找不到元素。怎么了？

Answer 1

同一个 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();
            }
        }
    }