Question

我是jQuery的新手，我正在尝试实现一个非常简单的工具提示，以了解jQuery的工作原理。

谷歌搜索后，这就是我所做的：

的 jQuery的：

$(document).ready(function(){

    $("#foo1").mouseover(function(e){
        var x = e.pageX - $("#container").offset().left;
        var y = e.pageY - $("#container").offset().top;
        $('#div1').css({'top':y,'left':x}).show();
    });

    $("#foo1").mousemove(function(e){
        var x = e.pageX - $("#container").offset().left;
        var y = e.pageY - $("#container").offset().top;
        $('#div1').css({'top':y,'left':x});
    });

    $("#foo1").mouseout(function(){
        $('#div1').hide();
    });

})

HTML：

<div style="width: 200px; border: 1px black solid; position: relative;">
    Something here
</div>
<div id="container" style="width: 300px; border: 1px black solid; position: relative;">
    <a id="foo1" href="javascript:void(0);">[hover me]</a>
    <div id="div1" class="tt">Content goes here.</div>
    <a id="foo2" href="javascript:void(0);">[hover me too!]</a>
    <div id="div2" class="tt">I'm not working :(</div>
</div>

我使用了var x = e.pageX - $("#container").offset().left;，因为#div1在position: relative;

的div中时出现问题

一切正常，但如果我添加其他链接怎么办？

我想传递#foo1和#div1（最终#container，但实际上我真的不需要它）作为参数，但事实是我完全不知道关于如何做到这一点。

我尝试在这里搜索，我发现了这个：JQuery, Passing Parameters

所以我想也许我可以这样做：

function doStuff(param1, param2) {
    $(param1).mouseover(function(e){
        var x = e.pageX - $("#container").offset().left;
        var y = e.pageY - $("#container").offset().top;
        $(param2).css({'top':y,'left':x}).show();
    });
    //etc etc
}

但我不知道如何在HTML中回忆这个函数：在javascript中我会做类似onmouseover="doStuff('foo1', 'div1')"的事情，但我真的不知道如何处理jQuery：|

修改

这是生成div的代码：

foreach ($colors_array as $key => $value) {
    echo "<div id='foo" . $key . "'>";
    // something else
    // according to some condition, I will decide whether to
    // call or not the function doStuff for this div.
    echo "</div>";
}

Answer 1

这是另一个解决方案，找到 tt 类旁边的元素：

$(document).ready(function(){

    $(".tooltipped").mouseover(function(e){
        var x = e.pageX - $("#container").offset().left;
        var y = e.pageY - $("#container").offset().top;
        $(this).next('.tt').css({'top':y,'left':x}).show();
    });

    $(".tooltipped").mousemove(function(e){
        var x = e.pageX - $("#container").offset().left;
        var y = e.pageY - $("#container").offset().top;
        $(this).next('.tt').css({'top':y,'left':x});
    });

    $(".tooltipped").mouseout(function(){
        $(this).next('.tt').hide();
    });

})

你的HTML：

<div id="container" style="width: 300px; border: 1px black solid; position: relative;">
    <a id="foo1" class="tooltipped" href="javascript:void(0);">[hover me]</a>
    <div id="div1" class="tt">Content goes here.</div>
    <a id="foo2" class="tooltipped" href="javascript:void(0);">[hover me too!]</a>
    <div id="div2" class="tt">I'm not working :(</div>
</div>

Answer 2

以下内容如何:(假设您将class =“active”添加到您想要悬停效果的元素+动态div位于a元素旁边）

$(document).ready(function(){

$(".active").each(function(index, value){
    $(this).mouseover(function(e){
        var x = e.pageX - $("#container").offset().left;
        var y = e.pageY - $("#container").offset().top;
        $(this).next().css({'top':y,'left':x}).show();                        
    });

    $(this).mousemove(function(e){
        var x = e.pageX - $("#container").offset().left;
        var y = e.pageY - $("#container").offset().top;
        $(this).next().css({'top':y,'left':x});
    });

        $(this).mouseout(function(){
        $(this).next().hide();
    });
});

}）

示例HTML代码：

<div style="width: 200px; border: 1px black solid; position: relative;">
    Something here
</div>
<div id="container" style="width: 300px; border: 1px black solid; position: relative;">
    <a id="foo1" class="active" href="javascript:void(0);">[hover me]</a>
    <div id="div1" class="tt">Content goes here.</div>
    <a id="foo2" href="javascript:void(0);">[hover me too!]</a>
    <div id="div2" class="tt">I'm not working :(</div>
    <a id="foo3" class="active" href="javascript:void(0);">[hover me too 3!]</a>
    <div id="div3" class="tt">I'm not working :(</div>
</div>

Answer 3

你已经拥有了你需要的东西。你对自己的功能名称感到困惑：

function setUpHandlers(param1, param2) {
    $(param1).mouseover(function(e){
        var x = e.pageX - $("#container").offset().left;
        var y = e.pageY - $("#container").offset().top;
        $(param2).css({'top':y,'left':x}).show();
    });
    //etc etc
}

$(document).ready(function(){
    //Ok, now set them up once
    setUpHandlers('#foo1', '#div1');
    setUpHandlers('#foo2', '#div2');
});

带参数的jQuery函数

3 个答案: