使用jQuery在for循環中更改div的css值

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中的標記而不是直接應用樣式規則來讓您的生活更輕鬆。祝你好運！