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

UPDATE 出于某种原因，我无法评论。我现在明白了，但我的css中没有班级，因此我不知道该行有何帮助。

Answer 1

if (!$(this)不是一个完整的表达; !正在否定，例如$(this).hasClass("current")。如果你写!($(this).hasClass("current"))，它会有相同的效果，也许你会更清楚。该表达式意味着＆＃34;如果此对象没有类＆＃39;当前＆＃39;＆＃34;。

班级＆＃34;当前＆＃34;正在按行添加到事物

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

Answer 2

本声明：

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

正在做几件事。它将this变量（在本例中是指悬停在其上的元素）包装在jQuery对象中（使用$(...)），然后在其上调用hasClass(...)方法，并且然后记录（!）结果。该语句为“ 如果悬停的元素没有”current“类，则执行块中的代码 ”

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

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

如果所选锚点没有current类，它是如何工作的。如果所选的a元素没有current类，则该语句将不起作用（如果这不是您要求的，请告诉我。）

Answer 3

$('#secondary_content_what_we_do li a')

选择所有a个元素，这些元素是li的后代，secondary_content_what_we_do本身就是ID为this的元素的后代。所以这个选择器返回一个jQuery包装的DOM元素的数组。

函数中的click关键字指的是触发事件的单个 DOM元素（hover，$(this)或其他任何内容。

this只是将原生DOM addClass元素再次包装为jQuery对象，因此我们可以访问jQuery函数，如removeClass和$('#secondary_content_what_we_do li a').hover(function() { if (!$(this).hasClass("current")) { doSomething(); } }

所以...

current

essentialy说当我们将鼠标悬停在选择器匹配的任何元素上时，如果我们在上悬停的特定元素不具有类!（hasClass运算符反转{{1}}调用的结果，然后做一些事情。

Answer 4

HTML DOM元素可以同时拥有多个类。那清楚了吗？

有人可以为我解释这段代码吗？

4 个答案: