Question

for (const doc of docs) {
    // create a `div` element
    const div = document.createElement("li");
    div.classList.add("list-group-item");
    div.style.border = "none";

    // add a text node to it
    div.appendChild(document.createTextNode(doc.name));

    // add event listeners to change its background
    div.addEventListener("mouseover", e => { div.style.background = "#e9ecef"; });
    if (div.style.backgroundColor !== "#e9ecef") {
        div.addEventListener("mouseout", e => { div.style.background = "white"; });
    }
    // add a `click` listener
    div.addEventListener("click", e => {
        updateInput(doc);

        var listGroup = document.getElementById("list-group-row").getElementsByTagName('li');
    });

    // add the new div to the container
    container.appendChild(div);
}

这是我将列表项添加到容器中的循环。 addEventListener和mouseover的{{1}}提供了一种效果，当我们将鼠标悬停时会改变背景颜色，而当鼠标悬停时会变回白色。

我的问题出在mouseout addEventListener部分。我试图更改click中的.style.backgroundColor，但是显然，由于它位于for循环中，因此其他列表项的颜色更改为。

使单个列表项更改backgroundColor onClick并在单击其他项目时又变回的最佳方法是什么？

我还希望保持div和mouseover的效果。

完整代码：

mouseout

Answer 1

您可能不需要在循环内附加事件。创建一个新函数来附加事件，但仅在循环完成后才调用此函数，取决于类list-group-item

的元素的可用性

//get all the elements with calss list-group-item
[...document.querySelectorAll('.list-group-item')].forEach(function(item) {
  // iterate and add event lstener to each of them
  item.addEventListener('click', function(elem) {
    // check if any element have a class active
    // if so then remove the class from it
    let getElemWithClass = document.querySelector('.active');
    if (getElemWithClass !== null) {
      getElemWithClass.classList.remove('active');
    }
    //add the active class to the element from which click event triggered
    item.classList.add('active')

  })
})

.active {
  color: green;
  font-size: 24px;
}

<li class="list-group-item"> 1 </li>
<li class="list-group-item"> 2 </li>
<li class="list-group-item"> 3 </li>
<li class="list-group-item"> 4 </li>

如果列表项单击并更改其他项，则更改背景颜色

1 个答案: