javascript - 在多个部分中鼠标悬停

Question

我正在尝试使用 js onmousehover 将鼠标悬停在图像上并在单独的固定位置告诉我所述图像的名称。我已经成功地做到了这一点，但是当我需要做大约六个时，我只能让它在第一个元素上工作。这是我的代码示例:

function getElementsById(ids) {
    var idList = ids.split(" ");
    var results = [], item;
    for (var i = 0; i < idList.length; i++) {
        item = document.getElementById(idList[i]);
        if (item) {
            results.push(item);
        }
    }
    return(results);
}

function hover(description) {
    console.log(description);
    document.getElementsById('content content1').innerHTML = description;
}

并称它为我一直在使用的:

<div class="product-description-box">
    <p>
      <div class="colorHeading">colors available: <span class="selectedColor" id="content"></span></div>
      <div class="prodColors"></div> 
    </p>
</div>

我为每个部分使用不同的 ID。 Js 肯定不是我的强项，因此我们将不胜感激!

Answer 1

一种更快的方法是提取元素集合，然后将其转换为数组:

像这样:

[].slice.call(document.getElementsByClassName("box"))
    .forEach(function(element) {element.addEventListener("mouseover", checkBoxColor);});

这对 getElementsByClassName 返回的 HTML 元素集合调用切片，以便将其转换为数组。之后，我运行 forEach 方法将事件监听器添加到每个 HTML 元素。

fiddle :https://jsfiddle.net/0saLvq2q/

在您的情况下，如果您需要通过许多不同的 ID 返回多个元素，您可以使用 querySelectorAll() 而不是 getElementsByClassName() 来提取元素。