帶參數的jQuery函數

我是jQuery的新手，我試圖實現一個非常簡單的工具提示，以瞭解jQuery如何工作。帶參數的jQuery函數

google搜索這之後就是我所做的：

的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是一個DIV中與position: relative;

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

我想通過#foo1和（並最終#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>"; 
}

來源

2013-01-20 tmh

如何使用上'$子選擇器（本）'，而不是給每個元素一個唯一的ID？ – Zeta

看看[jQuery.ready（）]（http://api.jquery.com/ready/） – mercsen

@mercsen：你的意思是：'jQuery（document）.ready（function（$）{ //使用$的代碼像往常一樣在這裏。 }）;'？ – tmh

這裏的另一種解決方案，找到元素旁邊有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-21 14:23:11

謝謝，這很有魅力，但如果我必須選擇是否顯示工具提示，該怎麼辦？我編輯了我的答案，請看看:) – tmh

不確定要理解你想要做什麼，但是通過放置工具提示的類，你應該能夠僅顯示thoses鏈接上的工具提示。 –

Omg這是如此微不足道，我沒有想過它！非常感謝您;） – tmh

你已經擁有你所需要的。你弄得自己與你的函數名稱：

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-20 12:05:24 Eric

mmm也許我忘了說'＃fooX'是動態生成的......我不知道它們的實際名稱:( – tmh

你能告訴我們生成它們的代碼嗎？ – Eric

我剛剛添加了代碼:) – tmh

如何關於以下內容:(假設您將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-21 14:39:12

這工作太:)謝謝 – tmh

帶參數的jQuery函數

回答

相關問題