Question

我知道有一个非常简单的jQuery方法，但现在我想了解为什么我的代码无法正常工作：

function insertAfter(referenceNode, newNode) {
    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

var menuHelp = document.querySelector(".menu_help");


for (var i = 0;i<menuHelp.length;i++){

menuHelp[i].onmouseenter = function(){
    menuHelpPopup = document.createElement("div");
    menuHelpPopup.setAttribute('class','menu_help_popup');
    menuHelpPopup.innerHTML = "test";
    insertAfter(menuHelp[i], menuHelpPopup);
}

menuHelp[i].onmouseleave = function(){
    menuHelpPopup.remove();
}

}

我尝试做的是创建一个弹出窗口，并在鼠标移到它们之后将其插入到具有某个类的元素之后。

DEMO http://jsfiddle.net/r5e8rvkg/

Answer 1

请确保menuHelp是一个nodeList，因此您应该使用document.querySelectorAll;
当鼠标输入时，i的值为menuHelp.length。所以你应该使用它，比如insertAfter（this，menuHelpPopup）

Answer 2

我使用了getElementsByClassName，似乎有效。

var menuHelp = document.getElementsByClassName('menu_help');

Answer 3

请在此处结帐：http://jsfiddle.net/r5e8rvkg/1/

首先，使用querySelectorAll代替querySelector。

更重要的是，您需要在代码中注意：

menuHelp[i].onmouseenter = function(){
    menuHelpPopup = document.createElement("div");
    menuHelpPopup.setAttribute('class','menu_help_popup');
    menuHelpPopup.innerHTML = "test";
    insertAfter(menuHelp[i], menuHelpPopup);
}

由于事件i是异步，因此无法正确传递值onmouseenter。调用函数时，i的值实际为i === menuHelp.length，结果为menuHelp[i] === undefined。

您需要使用Closure，如my JSFiddle code所示。

Answer 4

document.querySelector()方法仅返回具有指定选择器的第一个元素。要使用类'menu_help'获取每个元素，您需要使用document.querySelectorAll()方法。

换句话说，替换：

    var menuHelp = document.querySelector(".menu_help");

使用

    var menuHelp = document.querySelectorAll(".menu_help");

javascript - 在鼠标悬停时在具有特定类的元素之后插入div

4 个答案: