JS通過變數呼叫ID

大家好
首先資料：

    let NewDivForGame_0 = document.createElement('div');
    let NewDivForGame_1 = document.createElement('div');
    let NewDivForGame_2 = document.createElement('div');

等等...12
下一個：

  NewDivForGame_0.id = 'Key';
        NewDivForGame_1.id = 'string_1';
            NewDivForGame_2.id = '1a1';

等等...12
下一步：追加。
下一個：

   for (i=0;i<=12;i  ){
       document.getElementById("NewDivForGame_" i.id).style.width ="35px"; //ERROR
       document.getElementById("NewDivForGame_" [i].id).style.height= "35px"; //ERROR
       document.getElementById("NewDivForGame_" [i].id).style.backgroundColor = "blue";
       console.log('Create size div run #' i);

它不起作用。請幫幫我。請寫出解決方案。

試過：
1）document.getElementById("NewDivForGame_" i.id).style.width = "35px"; //ERROR 2）document.getElementById("NewDivForGame_" [i].id).style.width = "35px"; //ERROR
3）

let DetectPer = "NewDivForGame_";
document.getElementById(DetectPer i.id).style.width = "35px"; //ERROR

它不起作用。請幫幫我。請寫出解決方案。

uj5u.com熱心網友回復：

另一個例子，可能不像@mplungjan 的那個那么短，但它展示了如何以不同的方式完成它。

如果你想創建元素，你可以使用簡單的 for 回圈來完成它，但是你需要將它們作為其他 DOM 元素的子元素添加到 DOM 中。在下面的示例中，我添加了第一個“div”作為 body 的子項，第二個作為 first 的子項，依此類推。

因為所有元素參考都存盤在 newDivForGame 陣列中，所以我們可以使用它來使用簡單的 for 回圈更改樣式屬性。

{
  const newDivForGame = [];
  for (let i = 0; i < 12;   i) {
      newDivForGame.push(document.createElement('div'));
      newDivForGame[i].id = `key${i}`;
      document.body.appendChild(newDivForGame[I]);
  }

  for (const elem of newDivForGame) {
      elem.style.width = '35px';
      elem.style.height = '35px';
      elem.style.background = 'blue';
  }
}

uj5u.com熱心網友回復：

你不能像那樣構建你的選擇器 - 這是一廂情愿的想法。要做你正在嘗試的事情，你需要評估，或者更糟：

window["NewDivForGame_" i].id

哪個都不推薦

為什么不使用 querySelectorAll 訪問它們，在這里我找到了 id 以 NewDivForGame 開頭的所有元素

document.querySelectorAll("[id^=NewDivForGame]").forEach(div => {
  div.style.width ="35px"; 
  div.style.height= "35px"; //ERROR
  div.style.backgroundColor = "blue";
})

或者使用 css 和一個類

.blueStyle { 
  width: 35px;      
  height: 35px;
  background-color: blue;
}

并做

 NewDivForGame.classList.add("blueStyle") 

或者

document.querySelectorAll("[id^=NewDivForGame]").forEach(div => div.classList.add("blueStyle"))

uj5u.com熱心網友回復：

您的代碼的主要問題是這些行：

   for (i=0;i<=12;i  ){
       document.getElementById("NewDivForGame_" i.id).style.width ="35px"; //ERROR
       document.getElementById("NewDivForGame_" [i].id).style.height= "35px"; //ERROR
       document.getElementById("NewDivForGame_" [i].id).style.backgroundColor = "blue";
       console.log('Create size div run #' i);
   ...

據我所知，您正試圖通過期望瀏覽器評估將字串與數字連接起來的結果來訪問變數。

除此之外，您正試圖從 訪問該id屬性i，就目前而言，它是一個數字。number 原語沒有id屬性，但根據您的代碼，您似乎已經將它與您的 string/eval 假設混淆了。

最后，您的行[i]實際上是在創建一個陣列，其中數字i是唯一的元素。陣列同樣沒有id屬性。

(Un)幸運的是，Javascript 不是這樣作業的。至少不完全是那樣；為了使瀏覽器或容器按照您的期望進行操作，可以使用幾種方法，但我只打算參考兩種；可怕eval()的，我不會進入，因為它是一種危險的做法，并且是物件文字定義。當然還有其他方法，例如此處的其他現有答案，但是：

// Here, we define an object literal and assign it properties for each div manually.
let gameDivs = {
  NewDivForGame_0: document.createElement('div'),
  NewDivForGame_1: document.createElement('div'),
  // etc
};

// And then assign the id values sort of like you do in your question;
gameDivs.NewDivForGame_0.id = 'Key';
gameDivs.NewDivForGame_1.id = 'string_1';
gameDivs.NewDivForGame_2.id = '1a1';
// etc

for (i=0;i<=12;i  ){
       // Before finally using square bracket notation to target the
       // properties by a dynamic name;
       document.getElementById(gameDivs["NewDivForGame_" i].id).style.width ="35px";
       document.getElementById(gameDivs["NewDivForGame_" i].id).style.height= "35px"; 
       document.getElementById(gameDivs["NewDivForGame_" i].id).style.backgroundColor = "blue";
       console.log('Create size div run #' i);
}

當然，如果您有對它們的參考，您甚至不需要通過它們的 id 選擇它們，您可以這樣做：

for (i=0;i<=12;i  ){
       // Before finally using square bracket notation to target the
       // properties by a dynamic name;
       gameDivs["NewDivForGame_" i].style.width ="35px";
       gameDivs["NewDivForGame_" i].style.height= "35px"; 
       gameDivs["NewDivForGame_" i].style.backgroundColor = "blue";
       console.log('Create size div run #' i);
}

此示例假定 div 已附加到檔案中。

此方法在物件文字上使用方括號。您可能知道，也可能不知道，在以動態方式訪問物件的屬性時，應該使用方括號，例如您之前嘗試使用字串連接進行的操作。

由于物件的行為方式，您甚至可以使用 for 回圈生成 div，然后將它們添加到物件中：

let gameDivs = {};

for (let i = 0; i<=12; i  ) {
    let gameDiv = document.createElement('div');
    gameDivs["NewDivForGame_" i] = gameDiv;
    // append them too;
    document.body.appendChild(gameDiv);
}

當然，我不知道您使用什么模式來創建元素 ID，但總的來說，上面的方法是可行的。

標籤：javascript变量让

上一篇：Discord.py隨機變數輸入/輸出

下一篇：tkinter變數類/子類中“master”引數的用途是什么？