基於按鈕點擊不斷改變div的id

Question

我需要根據單擊的按鈕更改 div 的 ID。 這是我的按鈕的樣子：

 var id; // global variable holding = "holder"; var counter = 1; function sendData(valueId) { id = valueId; if (counter <= 1) { document.getElementById(holding).setAttribute("id", id); counter++; holding = id; } else { document.getElementById(holding).setAttribute("id", id); holding = id; } console.log(holding); console.log(id); }

 <button id="republic" onclick="sendData('republic')">Republic</button> <button id="ndtv" onclick="sendData('ndtv')">NDTV</button> <button id="cnnnews18" onclick="sendData('cnnnews18')">CNN</button>

我要定位的 div 只是一個空的<div id="holder"></div> 。 但是，當我嘗試運行此命令時，我看到 div 第一次發生了變化，但每次單擊時它都保持在相同的 ID 上。 我怎樣才能解決這個問題？

Answer 1

在常量中創建對“持有”div 的引用，並使用它來更改屬性。 例如，在代碼的開頭：

const holding = document.getElementById('holder');

然后，每當您需要更新元素時，請使用： holding.setAttribute(...);

這也恰好更有效，因為這意味着每次需要訪問元素時都不會查詢 DOM，因為holding常量提供了對它的直接引用。

Answer 2

您需要從按鈕中刪除 id。

  <button onclick="sendData('republic')">Republic</button>
  <button onclick="sendData('ndtv')">NDTV</button>
  <button onclick="sendData('cnnnews18')">CNN</button>

第一次單擊只有一個 id 為“holder”的元素在 dom 中可用。 但是在接下來我們將有兩個，因為 div 和 button 都會有republic/ndtv/cnnnews18 並且getElementById 返回按鈕，然后繼續。

但是，與其在根目錄下使用引用持有者 div ，不如說是一種更好的方法。 代碼將是：

var id; // global variable
holding = document.getElementById('holder');
var counter = 1;

function sendData(valueId) {
  id = valueId;
  if (counter <= 1) {
    holding.setAttribute("id", id);
    counter++;
  } else {
    holding.setAttribute("id", id);
  }
  console.log(id);
}

Answer 3

問題在於，當您按下其中一個按鈕時，您會創建多個具有相同 ID 的元素。 “持有人” div 將被分配其中一個按鈕的 id。

ID 是唯一的。 如果不是這種情況，則getElementById的行為是未定義的，因此瀏覽器可能只返回它找到的第一個符合條件的元素。 在您的示例中，這將是您的按鈕之一，而不是“持有人” div。

要使代碼正常工作，請確保按鈕的 ID 和代碼中的valueId變量不同。

Bladeski 的使用建議

const holding = document.getElementById('holder');

是很棒的。 但是您還應該確保文檔中的 id 保持唯一，以符合 HTML 標准並避免任何其他未定義的行為。