JS：如何確保只有子div在點擊時被切換

uj5u.com熱心網友回復：

你只觸發 [0]

我會委托

我還洗掉了 ID，因為 ID 需要是唯一的

const container = document.getElementById("container");
const boxes = container.querySelectorAll(".box")
container.addEventListener("click", function(e) {
  const tgt = e.target;
  if (tgt.classList.contains("mainmenu")) {
    const thisBox = tgt.nextElementSibling;
    boxes.forEach(box => {
      if (box != thisBox) box.classList.remove("bg-red");
    })
    thisBox.classList.toggle("bg-red");
  }
})

.bg-red {
  margin-top: 10px;
  background-color: red;
  height: 20px;
}

<div id="container">
  <div class="mainmenu">BOX1</div>
  <div class="box"></div>
  <div class="mainmenu">BOX2</div>
  <div class="box"></div>
</div>

uj5u.com熱心網友回復：

首先洗掉 id，您不需要它們（并且它們不是唯一的，因此無論如何它們都無效）。

然后，您需要遍歷所有.mainmenu專案并單擊 bin 以隱藏所有框并打開您單擊的專案旁邊的一個。

document.querySelectorAll(".mainmenu").forEach(function(menuElement) {
  menuElement.addEventListener("click", function() {
    document.querySelectorAll(".box").forEach(function(boxElement) {
      boxElement.classList.remove("bg-red");
    });

    this.nextElementSibling.classList.toggle("bg-red");
  });
});

.bg-red {
  margin-top: 10px;
  background-color: red;
  height: 20px;
}

<div class="mainmenu">BOX1</div>
<div class="box"></div>
<div class="mainmenu">BOX2</div>
<div class="box"></div>
<div class="mainmenu">BOX3</div>
<div class="box"></div>
<div class="mainmenu">BOX4</div>
<div class="box"></div>
<div class="mainmenu">BOX5</div>
<div class="box"></div>
<div class="mainmenu">BOX6</div>
<div class="box"></div>
<div class="mainmenu">BOX7</div>
<div class="box"></div>

uj5u.com熱心網友回復：

您應該使用事件物件來獲取目標節點，然后更改其兄弟節點的類

<div  class="mainmenu" onClick="hideshowmenu(event)">BOX1</div>
<div id="submenu" class="submenu"></div>
           
<div  class="mainmenu"  onClick="hideshowmenu(event)">BOX2</div>
<div id="box" class="box"></div>

function hideshowmenu(event) {
  const elem = event.target;

  // Get the next sibling element
  const sibling = elem.nextElementSibling;

  sibling.classList.toggle("bg-red");
}

https://jsfiddle.net/acbzetyL/

uj5u.com熱心網友回復：

首先，box-id 是重復的，在 HTML 中是不允許的。接下來，使用事件委托讓您的生活更輕松。如果您想div.box在單擊div.mainmenu元素后切換類，這可能是一個想法（注意：在分配處理程式后創建 100 個div.mainmenu元素）。

document.addEventListener(`click`, handle);
createSomeBoxes();

function handle(evt) {
  if (evt.target.classList.contains(`mainmenu`)) {
//^ act only on div.mainmenu  
    const currentBox = document.querySelector(`.bg-red`);
    currentBox && currentBox.classList.remove(`bg-red`);
//  ^             ^ remove the red background of the previously selected    
//  ^ first run: currentBox not available
    evt.target.nextElementSibling.classList.add(`bg-red`);
  }
}

// for demo
function createSomeBoxes() {
  let nBoxes = 0;
  while(nBoxes   < 100) {
    document.body.insertAdjacentHTML(`beforeend`,
    `<div >BOX ${nBoxes}</div>
     <div ></div>`);
  }
}

body {
  margin: 2rem;
  font: 12px/15px verdana, arial;
}
.mainmenu {
  cursor: pointer;
}

.bg-red {
  margin-top: 2px;
  background-color: red;
  height: 20px;
  width: 20vw;
}
## Heading ##

標籤：javascript html css

上一篇：while陳述句中錯誤的日期增量

下一篇：Fullcalendar錯誤呈現意外令牌