jQuery - 調用函數內聯

Question

我試圖將一個變量傳遞給內聯的jQuery函數（即：在實際鏈接中使用onMouseOver="function();" （這是圖像映射中的區域標記））。

只有在我將它放在$(document).ready(function(){ line之前，才會調用該函數，但這樣做會導致jQuery出現各種問題。

我想要的只是一個簡單的標簽（例如<area shape="circle" coords="357,138,17" onMouseOver="change('5');" id="5" />來啟動一個包含的函數在正常的jQuery代碼體內。

非常感謝您提供的任何幫助。

為了說明這一點，以下工作：

<script type="text/javascript">
function myfunction(x)    {  alert(x); //Alerts 2  
}
</script>

<img src="/shared_images/loading.gif" border="0" usemap="#Map">
<map name="Map"><area shape="rect" coords="171,115,516,227"
onMouseOver="myfunction('2')"></map>

但以下情況並非如此

<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function myfunction(x)    {  alert(x); //Nothing happens   
}
}
</script>

<img src="/shared_images/loading.gif" border="0" usemap="#Map">
<map name="Map"><area shape="rect" coords="171,115,516,227"
onMouseOver="myfunction('2')"></map>

Answer 1

在你的第二個例子中，你已經在你傳遞給.ready()的匿名函數中聲明了myfunction 。 這意味着myfunction是一個局部變量，它只在匿名函數的范圍內，你不能從其他任何地方調用它。

有兩種解決方案。

首先，您可以在調用.ready()之外（之前或之后）聲明它。 這不應該對jQuery造成任何干擾。 如果確實如此，那么其他錯誤（可能是一個簡單的語法錯誤？）我們歡迎您提出StackOverflow問題。

其次，你不應該使用onMouseOver=""來附加事件處理程序（因為它將JavaScript與HTML混合在一起），所以讓我們完全廢除它。 用以下內容替換您的JavaScript：

$(document).ready(function() {
    $("#that-area-down-there").mouseover(function() {
        alert(2);
    });
});

你的HTML用這個：

<area shape="rect" coords="171,115,516,227" id="that-area-down-there" />

（當然，您可能希望用上下文中更有意義的內容替換該id 。）

Answer 2

代碼不起作用的原因有兩個。 首先，在調用ready函數時缺少右括號，因此會出現語法錯誤。

其次，您在函數內定義的函數僅存在於該范圍內。 退出該功能時，它不再存在。

例：

$(document).ready(function(){
   function myfunction(x) {
      alert(x);
   }
   myfunction(42); // here it works
}

myfunction(-1); // here it doesn't exist

您可以在函數內全局定義函數，如下所示：

$(document).ready(function(){
  myfunction = function(x) {
    alert(x);
  }
});