Question

HY！我正在写关于种植植物的脚本。我的问题是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是一个2d 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();
            }
        }
    }

Answer 2

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

有关更具体的帮助，您需要在jsfiddle中发布代码的简化版本。

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

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

2 个答案: