Javascript使用onClick事件中的值將類添加到元素

Question

我整天都在努力解決此問題，我敢肯定這很簡單，但是如果我能解決的話，我會很驚訝。

我嘗試了存檔，但似乎找不到解決我特定問題的方法，因此將非常感謝您的幫助！

我想在單擊列表項時向單個元素添加樣式。 列表項ID和相關的div類是在我的PHP代碼中動態創建的。

通過我的腳本，我得到了一個警告框，它可以作為測試來顯示附加到列表項的onclick事件正在返回正確的值。 在這種情況下，ID和類為“ 1995”

但是，當我使用以下命令將正確返回的值添加到腳本中時

document.getElementsByClassName(supplyClass).style.display = "none";

在控制台中，我得到

“未捕獲的ReferenceError：未定義reply_click”

下面是節略的代碼，其中注釋了成功的警報行。

 function reply_click(supplyClass) { //alert(supplyClass); document.getElementsByClassName(supplyClass).style.display = "none"; } 

 <div class="supply-container"> <div class="supply-menu"> <ul> <li id="1995" onClick="reply_click(this.id)">Desking Systems</li> </ul> <div> <div class="supply-content-container"> <div class="1995 supply-content" > <p>LorumIpsum</p> </div> </div> </div> 

Answer 1

由於事件處理程序正在傳遞clicked元素的id ，因此您需要使用document.getElementById來查找該元素並將其顯示為無，如下所示

  function reply_click(supplyClass) { alert(supplyClass); //document.getElementsByClassName(supplyClass).style.display = "none"; document.getElementById(supplyClass).style.display = "none"; } 

 <div class="supply-container"> <div class="supply-menu"> <ul> <li id="1995" onClick="reply_click(this.id)">Desking Systems</li> </ul> <div> <div class="supply-content-container"> <div class="1995 supply-content" > <p>LorumIpsum</p> </div> </div> </div> 

Answer 2

document.getElementsByClassName(supplyClass)返回元素列表，因此您不能直接設置其樣式。

如果要為以這種方式返回的所有元素設置樣式，則可以這樣進行。

const els = document.getElementsByClassName(someClass);

for (let i = 0; i < els.length; i++) {
  els[i].style.display = 'none';
}

Answer 3

謝謝Felix＆Sumeet正確的代碼行如下。

document.querySelector('.supply-' + supplyClass).style.display = 'none';

我還沒有意識到您不能以整數開頭的類名，因此在supplyClass值后面附加了單詞“ supply”和“-”，效果很好。

再次感謝。