3

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

我想要做的是将 id 名称附加到我的 url 中，但我得到的是“#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>
4

3 回答 3

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


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

}

您使用“this”将元素传递给您的函数

于 2013-04-09T02:39:33.040 回答
3

如果你调试，你会发现this在这个上下文中是window对象。您可以像这样传递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;
}
于 2013-04-09T02:40:46.773 回答
2

这是因为设置onclickHTML 属性等同于设置匿名函数，如下所示：

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>

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

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

通过这种方式，您正在调用传递正确上下文对象的函数。就像将来的参考一样，您也可以传递eventas 第一个参数：

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

PS 请注意，如果href您的标签中没有属性a，浏览器不会将该标签威胁为“链接”。

于 2013-04-09T02:47:15.743 回答