有人可以帮我解释一下此代码吗？

Question

Hi im using this code for a list of links that have an animation on their padding. I wanted when i clicked on it to keep that padding and not animate back to its original position. What i dont understand are two things. " if (!$(this) " that part of code and how when i dont have a class of current on any link does it find any? Thanks so much!

$(function() {
    $('#secondary_content_what_we_do li a').hover(function() {
        if (!$(this).hasClass("current")) {
            $(this).stop().animate({
                "paddingLeft": "10px"
            }, 400).addClass('column_hover');
        }
    }, function() {
        if (!$(this).hasClass("current")) {
            $(this).stop().animate({
                "paddingLeft": "0px"
            }, 'slow').removeClass('column_hover');
        }
    });

    $('#secondary_content_what_we_do a').click(function() {
        $('a').removeClass('column_active').removeClass("current");
        $(this).addClass('column_active').addClass("current");
        $('#secondary_content_what_we_do li a').trigger('mouseleave');
        var url = $(this).attr('href');
        $('#loading_content').hide().load(url).fadeIn(1000);
        return false;
    });
})

UPDATE For some reason i cant comment. I understand now, but i dont have a class current in my css so i dont know how that line helps.

Answer 1

The if (!$(this) is not a complete expression; the ! is negating, for example, $(this).hasClass("current") . It would work the same, and maybe be clearer to you, if you wrote !($(this).hasClass("current")) . That expression means "if this object does not have the class 'current'".

The class "current" is getting added to things by the line

$(this).addClass('column_active').addClass("current");

Answer 2

This statement:

if (!$(this).hasClass("current"))

Is doing several things. It's wrapping the this variable (which in this case refers to the element that was hovered over) in a jQuery object (using $(...) ), and then calling the hasClass(...) method on it, and then notting ( ! ) the result. The statement reads " If the element that was hovered over does not have the class "current" then execute the code within the block "

As for the second part of your question, I think you're referring to this line:

$('a').removeClass('column_active').removeClass("current");

And how it works if the anchor selected doesn't have a class of current . If the a element selected has no current class, the statement will have no effect (Please let me know if this isn't what you're asking).

Answer 3

$('#secondary_content_what_we_do li a')

selects ALL a elements which are descendants of an li which is itself a descendent of the element with id secondary_content_what_we_do . So this selector returns an array of jQuery wrapped DOM elements.

The this keyword inside the function refers to the single DOM element which triggered the event ( click , hover or whatever).

$(this) simply wraps the native DOM this element as a jQuery object again so we can access the jQuery functions like addClass and removeClass

so...

$('#secondary_content_what_we_do li a').hover(function() {
        if (!$(this).hasClass("current")) {
            doSomething();
        }
}

essentialy is saying when we hover over any element matched by the selector, if the specific element we hovered over doesn't have the class current (the ! operator reverses the result of the hasClass call), then do something.

Answer 4

HTML DOM elements can have more than one class at the same time. Does that clear thing up?