Question

我一直在努力奋斗一个小时，我无法解决它。我是新手在javascript上使用this，但这很简单，而且它不起作用。

这是HTML

<ul class="nav pull-right nav-tabs" id="primarynav">
    <li class=" navlink">
        <a href="#">About</a>
    </li>
    <li class="navlink active">
        <a href="#">Portfolio</a>
    </li>
    <li class="navlink">
        <a href="#">Contact</a>
    </li>
</ul>

和js

$(document).ready(function(){
    $(".navlink").click(function(){
        $(".navlink").removeClass("active");
        this.addClass("active");
    });
});

因此应该从类active的所有元素中删除类navlink，然后将类active添加到单击的元素中。但事实并非如此。

http://jsfiddle.net/Tckf7/

Answer 1

将其更改为：

$(this).addClass("active");

<强> jsFiddle example

.addClass()是一个jQuery方法，您一直在尝试将其应用于非jQuery对象（this vs $(this)）。

Answer 2

addClass()是一个jQuery方法，但this只是对DOM对象的直接引用。您需要首先将this包装到jQuery对象中，然后才能在其上使用jQuery方法。

$(document).ready(function(){
    $(".navlink").click(function(){
        $(".navlink").removeClass("active");
        $(this).addClass("active");
    });
});

DEMO - 使用$(this).addClass()代替this.addClass()

修改

详细说明一下。你永远不能在JavaScript对象上调用jQuery的addClass()方法，因为addClass()是一个jQuery方法。

要在纯JavaScript中执行相同操作，如果您只想使用this，则可以使用element.className，类似于：

$(document).ready(function(){ $(".navlink").click(function(){ $(".navlink").removeClass("active"); //$(this).addClass("active"); this.className += " active"; }); });

DEMO - 使用this.className示例

虽然如果你已经使用jQuery，那么不使用$(this).addClass()就没有意义了。

Answer 3

this指的是jQuery附加事件的DOMElement。要将其转换为jQuery集合并能够使用addClass之类的jQuery方法，请将其作为参数传递给$：

$(this).addClass("active");

在内部函数中，this关键字实际上是指函数的上下文。对于事件处理程序，上下文是处理程序附加到的DOMElement。

Answer 4

this不是jQuery对象，而是使用$(this)。

Answer 5

你应该使用$（this）

$(document).ready(function(){
    $(".navlink").click(function(){
        $(".navlink").removeClass("active");
        $(this).addClass("active");
    });
});

http://jsfiddle.net/Tckf7/2/

“这”没有按预期工作

5 个答案: