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>显示在鼠标旁边，但它始终是最后一个＆＃34;工具提示＆＃34; + i，在这种情况下显示的是tooltip6。< / p>

我设法通过简单地删除循环来工作，然后写下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";
    }
});

在这种情况下，它做我想要的。如果我使用<div id=help1>，它会显示工具提示1，当鼠标位于<div id=help4>上时，以及（例如）工具提示超过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";
    }
}

}）;

在.mousemove函数中循环

1 个答案: