Javascript 带参数的jQuery函数

我是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();
    });

})

<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>

HTML:

$(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();
    });

})

<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>

但我不知道如何在HTML中调用这个函数：在javascript中，我会做一些类似于

onmouseover=“doStuff（'foo1'，'div1'）”

，但我真的不知道如何使用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();
    });

})

<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>

这是生成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>";
}

foreach（$colors\u数组为$key=>$value）{
回声“；
//别的
//根据某种情况，我将决定是否
//是否为此div调用函数doStuff。
回声“；
}

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

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');
});

---

下面是另一个解决方案，在havingtt类旁边查找元素：

$(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>

内容在这里。
我不工作：(

以下内容如何：（假设您将class=“active”添加到您希望具有悬停效果的元素中+动态div位于a元素旁边）

})

示例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>

这里有东西
内容在这里。
我不工作：(
我不工作：(

在

$（this）

上使用子选择器而不是给每个元素一个唯一的ID怎么样？看看@mercsen：你的意思是：

jQuery（document）。ready（函数（$）{//code像往常一样使用$在这里）

？嗯，也许我忘了说

#fooX

是动态生成的…我不知道它们的实际名称：（谢谢，这很有魅力，但是如果我必须选择是否显示工具提示，该怎么办？我已经编辑了我的答案，请看一看：）我不知道你想做什么，但是通过设置tooltipped类，你应该能够只在这些链接上显示工具提示。天哪，这太微不足道了，我没有想到！非常感谢；）