Question

我在锚标记上调用函数test()，如下所示： -

<a class="link" onclick="test();">Hello</a>

我正在尝试访问函数test（）中的锚类： -

function test()
{
  alert($(this).attr("class"));
}

但是这会提醒undefined。我知道调用onclick=test(this);代替并具有以下功能： -

function test(obj)
{
  alert($(obj).attr("class"));
}

但是，我希望在不传递this的情况下访问元素的属性（调用函数的属性）。只能能够使用元素的get / set属性（调用函数的属性）。可能吗？这该怎么做？

Answer 1

this是“调用此函数的对象”，因此对于foo.test()，this foo内test。如果您没有指定对象，则默认为window，因此您的代码this === window中，因为您正在调用（隐式）window.test()。

忘记内在事件属性。它们很丑陋，不适合unobtrusive JavaScript。

相反，使用JavaScript来分配事件处理程序。您已经使用的jQuery提供了许多方法，包括click。将要调用的函数作为参数传递给它。

jQuery('.link').click(test);

当点击事件触发时，它现在会调用类似HTMLElementNode.test()而不是HTMLElementNode.onclick()的内容，因此this将是您想要的。

Answer 2

在这种情况下，我们需要确保HTML元素拥有您在单击时要调用的函数。你实际上在做的是你正在使用onclick属性，它只需要 string 参数并完全忘记其他一切。

为了使该功能的HTML元素所有者，您需要使用自己的自定义函数映射onclick属性完全。在JavaScript中你可以这样做

element.onclick = doSomething;

所以我们的代码就像

<div id="element">Click</div>
<script>
function doSomething(){
    this.style.color= "#000000"
}
document.getElementById("element").onclick = doSomething;
</script>

这是工作示例http://www.jsfiddle.net/VMCmb/1/。

另请注意http://www.quirksmode.org/js/this.html。

Answer 3

因为“this”是Javascript中的一个特殊自由变量：它受调用者的上下文约束。通过这是一种更好，更安全的工作方式。

Answer 4

您也可以使用此方法 -

将此作为参数传递 -

<a class="link" onclick="test(this);">Hello</a>

Jquery代码将是 -

function test(obj)
{
  alert($(obj).attr("class"));
}

使用$（this）访问javascript函数内的html元素的属性给出了undefined

4 个答案: