無法使用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屬性，則瀏覽器不會將該標記作爲「鏈接」進行威脅。