CODEWITHSUNDEEP
jqueryaddclassremoveclass
loriensleafs
loriensleafs

Reputation: 2255

jquery addClass function only fist half works

I have some links where I'd like to basically do a class swap. When I have it set up like so it runs all the way through:

$("#work").click(function() {
    $(".nav_middle_text").removeClass("selected");
    $(".nav_middle_text").addClass("notselected");
    $(this).removeClass("notselected");
    $(this).addClass("selected");  


    a1=1;

    $("#top_section").animate({
        height:30
    },450);
    $("#bottom_section").animate({
        height:$("#grid").outerHeight(true)
    }, 450); 
    $("#about_container").animate({
        marginTop:$("#about_container").outerHeight(true) *-1
    }, 450);   

});

But when I try to set it up this way it runs the first two add and remove classes with the specific class, but the second two using 'this' don't work. Is there a reason running it this way prevents 'this' from working?

function nav_click() {
    $(".nav_middle_text").removeClass("selected");
    $(".nav_middle_text").addClass("notselected");
    $(this).removeClass("notselected");
    $(this).addClass("selected");          
}    



$("#work").click(function() {
    nav_click();


    a1=1;

    $("#top_section").animate({
        height:30
    },450);
    $("#bottom_section").animate({
        height:$("#grid").outerHeight(true)
    }, 450); 
    $("#about_container").animate({
        marginTop:$("#about_container").outerHeight(true) *-1
    }, 450);   
});

Thanks in advance for any help

Upvotes: 0

Views: 147

Answers (3)

yednamus
yednamus

Reputation: 583

That is happening because you are not passing anything in the callback function you just need to pass the element, this doen't refer to #work so you are unable to change the class do it this way...

function nav_click(element) {
    $(".nav_middle_text").removeClass("selected");
    $(".nav_middle_text").addClass("notselected");
    $(element).removeClass("notselected");
    $(element).addClass("selected");          
}    
    $("#work").click(function() {
    nav_click(this);


    a1=1;

    $("#top_section").animate({
        height:30
    },450);
    $("#bottom_section").animate({
        height:$("#grid").outerHeight(true)
    }, 450); 
    $("#about_container").animate({
        marginTop:$("#about_container").outerHeight(true) *-1
    }, 450);   
});

Upvotes: 0

Swadq
Swadq

Reputation: 1837

In the context of an anonymous event handler function, this references the element that the event is occurring to. For that reason, this does not reference what you think it means in the second context.

You could pass the element to the function, however:

function nav_click(element) {
    $(".nav_middle_text").removeClass("selected");
    $(".nav_middle_text").addClass("notselected");
    $(element).removeClass("notselected");
    $(element).addClass("selected");          
} 

$("#work").click(function() {
    nav_click(this);
    // etc
});

Upvotes: 0

jfriend00
jfriend00

Reputation: 707736

When you call the function nav_click(), this is no longer what it was inside the click handler. If you want to use the nav_click() function, then you must pass the value of this to that function. You can either do that by causing this to be set appropriately inside the function:

nav_click.call(this);

Or, you can just pass it as an ordinary argument and change nav_click() to use that argument

nav_click(this);

function nav_click(item) {
    $(".nav_middle_text").removeClass("selected");
    $(".nav_middle_text").addClass("notselected");
    $(item).removeClass("notselected");
    $(item).addClass("selected");          
}

FYI, the value of this inside a function is determined by how that function is called. If using just a normal function call like nav_click(), then this is reset to either the window object (normal JS mode) or to undefined (JS strict mode).

To explicitly cause this to be set to a particular value inside a function, use .apply() or .call(). See the MDN pages for a description of these methods here and here.

Upvotes: 2

Related Questions