Question

我要做的是将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

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


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

}

使用“this”

将元素传递给函数

Answer 2

如果您进行调试，您会发现此上下文中的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 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>

P.S。请注意，如果href标记中没有a属性，浏览器就不会将该标记视为“链接”。

使用onClick无法获取id名称？

3 个答案: