“这”没有按预期工作

Question

I've been struggling with this for an hour now, and I can't solve it. I'm new to use this on javascript, but this is really simple, and it's just not working.

Here's the 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>

And the js

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

So it should remove class active from all elements with class navlink , and then add class active to the clicked element. But it doesn't.

http://jsfiddle.net/Tckf7/

Answer 1

Change it to:

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

jsFiddle example

.addClass() is a jQuery method and you had been trying to apply it to a non-jQuery object ( this vs $(this) ).

Answer 2

addClass() is a jQuery method but this is just the direct reference to the DOM object. You need to wrap this into a jQuery object first before you can use a jQuery method on it.

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

---

DEMO - Using $(this).addClass() instead of this.addClass()

---

Edit

To elaborate a little on this. You can never call jQuery's addClass() method on a JavaScript object as addClass() is a jQuery method.

To do the same in pure JavaScript, if you want to just use this , you could use element.className , similar to this:

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

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

---

DEMO - Using this.className example

---

Though if you are using jQuery already it would make little sense not to use $(this).addClass() instead.

Answer 3

this refers to the DOMElement to which jQuery has attached the event. To turn it into a jQuery collection and be able to use jQuery methods like addClass , pass it as an argument to $ :

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

Inside functions, the this keyword actually refers to the context of the function. In the case of event handlers, the context is the DOMElement that the handler is attached to.

Answer 4

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

Answer 5

You should use $(this)

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

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