javascript - 不同 ID 对的相同 Javascript 代码

Question

我下面有一些 JS 代码，基本上代表:当具有 x1 ID 的元素悬停时，使具有 x1-1 ID 的元素可见，然后在 mouseout 上返回到默认隐藏。问题是我还有几个 ID 对(x2 和 x2-1、x3 和 x3-1 等)需要应用相同的代码，我不想重复代码 5 或 6 次。有没有一种聪明的方法可以用几行代码将其包装起来？

document.getElementById("x1").addEventListener("mouseover", mouseOver);
document.getElementById("x1").addEventListener("mouseout", mouseOut);

function mouseOver() {
    document.getElementById("x1-1").style.visibility = "visible";
}

function mouseOut() {
    document.getElementById("x1-1").style.visibility = "hidden";
}

Answer 1

不要使用 id，使用类。你应该为独占的特定元素使用 id，如果你有一组相似的元素，类更好:

 function mouseOver() {
            this.style.visibility = "visible";
 }
function mouseOut() {
            this.style.visibility = "hidden";
}
var classCollection= document.getElementsByClassName("classname");

classCollection.forEach(function(i){
    i.addEventListener("mouseover", mouseOver);
    i.addEventListener("mouseout", mouseOut);
})

在此处查看进一步说明:JavaScript click event listener on class