javascript - jQuery - 内联调用函数

Question

我正在尝试将一个变量内联传递给 jQuery 函数(即:在实际链接(这是图像映射中的区域标记)中使用 onMouseOver="function();")。

只有当我将它放在 $(document).ready(function(){ 之前时，该函数才会被调用行，但这样做会导致 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

在你的第二个例子中，你已经声明了 myfunction inside 你传递给 .ready() 的匿名函数。这意味着 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 替换为在上下文中更有意义的内容。)