2

我是 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;是因为我在#div1div 内时遇到了问题position: relative;

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

我想传递#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>";
}
4

3 回答 3

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>
于 2013-01-21T14:23:11.417 回答
1

以下内容如何：（假设您将 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>
于 2013-01-21T14:39:12.270 回答
0

你已经拥有了你需要的东西。您对函数名称感到困惑：

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');
});
于 2013-01-20T12:05:24.483 回答