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

Question

大家好，我使用此代码获取在其填充上具有动画的链接列表。 当我单击它时，我想要保留该填充，而不是重新设置其原始动画。 我不明白的是两件事。 “ if (!$(this) ”那部分代码以及当我在任何链接上都没有电流类时如何找到它？非常感谢！

$(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;
    });
})

由于某种原因，我无法发表评论。 我现在知道了，但是我的CSS中没有当前的课程，所以我不知道这条线有什么帮助。

Answer 1

if (!$(this)不是一个完整的表达式； !表示否定，例如$(this).hasClass("current") ，它的工作原理相同，如果您写了，可能会更清楚!($(this).hasClass("current")) 。该表达式的意思是“如果此对象没有类'current'”。

该行将“ current”类添加到事物中

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

Answer 2

这个说法：

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

正在做几件事。 它将this变量（在本例中是指被悬停的元素）包装在jQuery对象中（使用$(...) ），然后在其上调用hasClass(...)方法，然后注意（ ! ）结果。 语句显示为“ 如果悬停的元素不具有“当前”类，则在块内执行代码 ”

至于问题的第二部分，我认为您指的是这一行：

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

以及如果选定的锚没有一类current话它是如何工作的。 如果a选择的元素没有current类，声明不会有任何影响（请让我知道这是不是你在问什么）。

Answer 3

$('#secondary_content_what_we_do li a')

选择所有a li后代的元素，而li本身是id为secondary_content_what_we_do的元素的后代。 因此，此选择器返回jQuery包装的DOM元素数组 。

函数内的this关键字指的是触发事件的单个 DOM元素（ click ， hover或其他）。

$(this)只是将原生DOM this元素再次包装为jQuery对象，因此我们可以访问jQuery函数，例如addClass和removeClass

所以...

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

本质上是说，当我们将鼠标悬停在与选择器匹配的任何元素上时，如果我们悬停的特定元素没有 current的类（ !运算符会反转hasClass调用的结果），然后执行一些操作。

Answer 4

HTML DOM元素可以同时具有多个类。 这样清除了吗？