4

我已经为此苦苦挣扎了一个小时，但我无法解决。我是使用thisjavascript 的新手，但这真的很简单，而且它不起作用。

这是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从所有带有 class 的元素中删除 class navlink，然后将 class 添加active到单击的元素。但事实并非如此。

http://jsfiddle.net/Tckf7/

4

5 回答 5

10

将其更改为：

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

jsFiddle 示例

.addClass()是一个 jQuery 方法，您一直试图将其应用于非 jQuery 对象 ( thisvs $(this))。

于 2013-03-14T19:14:16.083 回答
2

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

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

演示- 使用$(this).addClass()而不是this.addClass()

编辑

稍微详细说明一下。您永远不能像 jQueryaddClass()方法那样在 JavaScript 对象上调用 jQueryaddClass()方法。

要在纯 JavaScript 中做同样的事情，如果你只想使用this，你可以使用element.className，类似于：

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

        //$(this).addClass("active");
        this.className += " active";
    });
});

演示- 使用this.className示例

尽管如果您已经在使用 jQuery，那么不使用它就没有什么意义了$(this).addClass()。

于 2013-03-14T19:14:51.543 回答
2

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

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

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

于 2013-03-14T19:15:22.590 回答
1

this不是 jQuery 对象，请$(this)改用。

于 2013-03-14T19:14:35.093 回答
1

你应该使用 $(this)

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

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

于 2013-03-14T19:15:16.690 回答