Question

我有这样的代码

<img onclick="getTitle();" title="myimg" >  
function getTitle()  
{  
alert(jQuery(this).attr("title");  
}

它不起作用。有人可以解释如何做到这一点。这段代码出了什么问题。

Answer 1

As @Neal says，如果您使用jQuery，请正确使用它。

然而，这里有一个解释为什么你的代码不起作用的原因：

this指的是函数内的window。您可以使用.call()明确设置this：

<img onclick="getTitle.call(this);" title="myimg" >
<!-- `this` only refers to the element inside the handler -->

或者您必须明确地将该元素作为参数传递：

<img onclick="getTitle(this);" title="myimg" >

然后你也必须改变你的功能：

function getTitle(element)  {  
    alert(element.getAttribute('title'));
}

有关此类事件处理模型的更多信息，请read this article on quirksmode.org about early event handlers。

There is another one在事件处理程序的上下文中解释了this。

最好是阅读all the articles about event handling并了解不同的模型。实际上，您不应再通过HTML属性绑定事件处理程序了。

为了完整起见，没有jQuery，更好的原因是将事件处理程序附加到DOM属性。假设您的图片有ID

<img id="myimg" title="myimg" />

必要的JavaScript将是：

function getTitle()  {  
    alert(this.getAttribute('title'));
}  
document.getElementById('myimg').onclick = getTitle;

此代码必须位于HTML中的元素之后。

Answer 2

你离开了)

function getTitle()  
{  
    alert(jQuery(this).attr("title"));  
}

此外，由于您使用的是jQuery，因此最好这样做：

<img id="imgID" title="myimg" >  

jQuery('#imgID').click(function(){  
   alert(this.title);  
})

Answer 3

您忘记了<script></script>标记，并且您在)函数末尾也遗漏了alert()。您还需要在this函数中传递onclick，以便了解正在调用的项目。

<script>
function getTitle(element)  {
    var objTitle = jQuery(element).attr("title"); 
    alert(objTitle); 
}
</script>
<img onclick="getTitle(this);" title="myimg" />

此外，之前使用<script>将确保此特定功能正常工作。

或者，为了使它更简单，你可以这样做：

<script>
function getTitle(elementTitle)  { 
    alert(elementTitle); 
}
</script>
<img onclick="getTitle(this.title);" title="myimg" />

在javascript函数中使用它

3 个答案: