事件監聽器class的變化只是暫時的，classList.replace只是一次點擊，如何讓它永久化

Question

[.[enter image description here][1]][1]我想創建一個簡單的繪圖應用程序，通過單擊它們為正方形的背景着色。 我在每個 li 上添加了一個點擊事件，它通過添加 class 來更改背景顏色，但是。 我想通過添加 4 個按鈕來將其提升到一個新的水平，這些按鈕會更改高光燈的 colors？ 任何人都可以幫我嗎？

所以我的問題是：如何單擊一個按鈕（標題中的 li），它將 select 顯示為 ul class=grid li 上我的原始事件偵聽器的顏色？

 <header>
      <ul class="header">
        <li class="black">Black</li>
        <li class="red">Red</li>
        <li class="blue">Blue</li>
        <li class="orange">Orange</li>
      </ul>
    </header>
    <ul class="grid">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      .......
     

const myElements = document.getElementsByTagName("li");

for (let i = 0; i < myElements.length; i++) {
  myElements[i].addEventListener("click", function () {
    let selected = myElements[i];
    selected.classList.toggle("highlight");
  });
}

我試過了（刪除並添加新的 class，替換 class，切換）

black.addEventListener("click", function () {
  selected.classList.replace("highlight", "black");
});

但背景顏色的改變只是一次性的。 我想將新的 class 永久化。 1]: https://i.stack.imgur.com/Fgg87.png

Answer 1

通過向您的ul.header li和ul.grid li添加事件偵聽器，您將實現此目的。 ul.header li click 事件偵聽器將保存您想要的顏色， ul.grid li click 將使用保存的顏色來應用它。

 var selcolor = ''; const colorbtns = document.querySelectorAll('ul.header > li'); const griditems = document.querySelectorAll('ul.grid > li'); colorbtns.forEach(function(el) { el.addEventListener("click", function(e) { selcolor = e.target.className; console.log(selcolor); }); }); griditems.forEach(function(el) { el.addEventListener("click", function(e) { if(el.classList.length <= 0) { el.classList.add(selcolor); } else { el.className = ""; } }); });

 .header li { display:inline-block; color:#fff; padding:5px; }.grid li { width:50px; height:50px; display:inline-block; border:1px solid black; }.black { background-color:black; }.red { background-color:red; }.blue { background-color:blue; }.orange { background-color:orange; }

 <header> <ul class="header"> <li class="black">Black</li> <li class="red">Red</li> <li class="blue">Blue</li> <li class="orange">Orange</li> </ul> </header> <ul class="grid"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>

編輯

更新了代碼

el.addEventListener("click", function(e) {
    el.classList.add(selcolor);
});

到

el.addEventListener("click", function(e) {
    if(el.classList.length <= 0) {
        el.classList.add(selcolor);
    }
    // this else statement will clear the color on second click if theres already one color assigned
    else {
       el.className = "";
    }
  });

這樣你只能根據你的評論分配一次顏色

但背景顏色的改變只是一次性的

Answer 2

在這種情況下，您最好使用 JavaScript 中的查詢選擇器。

const myElements = document.querySelectorAll("div.grid > li");

您可以在這里閱讀更多相關信息： https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector和https://developer.mozilla.org/en-US/docs/Web/ API/文檔/querySelectorAll