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元素。

小提琴：https://jsfiddle.net/0saLvq2q/

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

Answer 2

'ids'不会自动成为列表。您想要使用的是Arguments Object。

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

Onmousehover在多个部分

2 个答案: