无法使用onClick获取id名称？

Question

http://wthdesign.net/test/test.html

我想要做的是追加ID的名称到我的网址，但我得到“#undefined”，而不是？

我使用的脚本：

function generateUrl() 
{ 
    var currentId = $(this).attr('id'); 
    document.location.hash = currentId; 
    console.log($(this)); 
} 

的HTML中：

<a id="abc" onClick="generateUrl()" >this is an anchor btn</a> 

Answer 1

如果调试功能，你会发现在这个上下文中的this是窗口对象。您可以通过this进入功能，像这样：

function generateUrl(el) 
{ 
    var currentId = $(el).attr('id'); 
    document.location.hash = currentId; 
} 

<a id="abc" onClick="generateUrl(this)" >this is an anchor btn</a> 

或者，你可以使用jQuery来代替你的网线onClick像这样：

$("#abc").click(function() 
{ 
    var currentId = $(this).attr('id'); 
    document.location.hash = currentId; 
} 

Answer 2

<a id="abc" onClick="generateUrl(this)" >this is an anchor btn</a> 


function generateUrl(elem) 
{ 
    var currentId = elem.id; 
    document.location.hash = currentId; 

} 

可以将元素与 “此”

Answer 3

这是因为设置onclick HTML属性相当于设置了这样一个匿名功能：

element.onclick = function(event) { 
    generateUrl(); 
} 

正如您所看到的，在您的呼叫中，您丢失了event对象和this上下文对象，该对象成为全局对象（浏览器的window）。

然后你有几种方法。首先，不要使用HTML属性，而应该使用JS设置点击，这是一种更好的做法 - 尽可能避免使用意大利式面条代码。

你使用jQuery，因此：

$(function() { 
    $("#abc").click(generateUrl); 
}); 

另外，你的函数可以简化为：

function generateUrl() { 
    window.location.hash = this.id; 
} 

所以你的HTML将只是：

<a id="abc">this is an anchor btn</a> 

如果，出于任何原因，您不能/不希望从HTML中删除onclick，您必须对其进行一些修改：

<a id="abc" onClick="generateUrl.call(this)" >this is an anchor btn</a> 

通过这种方式，您可以调用传递正确的上下文对象的函数。正如日后参考，你还可以通过event作为第一个参数：

<a id="abc" onClick="generateUrl.call(this, event)" >this is an anchor btn</a> 

附： 请注意，如果a标记中没有href属性，则浏览器不会将该标记作为“链接”进行威胁。