javascript - 在 .mousemove 函数中循环

Question

我的问题在这里:

    $(document).mousemove(function(e){
    for(i = 1; i < 7; i++){
        var tt = document.getElementById("tooltip"+i);
        document.getElementById("help"+i).onmousemove=function(event){
            if(tooltip == 1){
                $(tt).css({left:e.pageX+5, top:e.pageY+5});
                tt.style.visibility= "visible";
            }
        }
        document.getElementById("help"+i).onmouseout=function(event){
            tt.style.visibility= "hidden";
        }
    }
});

使用此代码，<div id="tooltip"+i>显示在鼠标旁边，但它始终是最后一个“tooltip”+i，在本例中显示的是 tooltip6。

我通过简单地删除循环 for 并在接下来编写 6 次，每次都使用不同的 i 来设法实现它:

    $(document).mousemove(function(e){
    var i = 1;
    var tt = document.getElementById("tooltip"+i);
    document.getElementById(i).onmousemove=function(){
        if(tooltip == 1){
            $(tt).css({left:e.pageX+5, top:e.pageY+5});
            tt.style.visibility= "visible";
        }
    }
    document.getElementById(i).onmouseout=function(){
        tt.style.visibility= "hidden";
    }
});

在这种情况下，它可以满足我的要求。它显示工具提示 1，当鼠标悬停在 <div id=help1> 上时和(例如)<div id=help4> 上的 tooltip4如果我使用 var i = 4 .

显然，随着我添加更多工具提示，我可以越来越像那样写，但我真的不明白为什么添加循环在这里不起作用。

我的带有工具提示的 HTML 代码:

        <span id=tooltip1>Health points of the rock. Each time it gets to 0, you get some stone</span>
        <span id=tooltip2>Deeper you go, harder it is.</span>
        <span id=tooltip3>Power of the Pickaxe.</span>
        <span id=tooltip4>Go To the Village.</span>
        <span id=tooltip5>Go To the Blacksmith.</span>
        <span id=tooltip6>You can sell stone in the village.</span>

和一些帮助的 HTML 代码:

                <div class=liststat id=help1>HP : <span id=hp>0</span></div>
            <br>
            <br>
            <div class=liststat id=help2>Deep Level : <span id=lvlrock>0</span>m</div>
            <br>
            <br>
            <div class=liststat id=help3>Pick Power : <span id=pickpower>0</span></div>
            <br>
            <br>
            <div class=liststat id=help6>Stone : <span id=nstone>0</span></div>

Answer 1

好的，所以在阅读评论后，我编辑了我的代码以使其更简单，并且没有添加任何其他监听器，以免脚本崩溃:

$(document).mousemove(function(e){
if(tooltip == 1){
    var i = e.target.id;
    var tt = document.getElementById("tooltip"+i);
    tt.style.visibility = "visible";
    $(tt).css({left:e.pageX+5, top:e.pageY+5});
    document.getElementById(i).onmouseout=function(){
        tt.style.visibility= "hidden";
    }
}

});