Question

我有一些链接，我想基本上做一个类交换。当我将它设置为这样时它会一直运行：

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

});

但是当我尝试以这种方式设置它时，它运行前两个添加和删除具有特定类的类，但使用'this'的后两个不起作用。这样运行它是否有理由阻止“这个”工作？

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

提前感谢您提供任何帮助

Answer 1

当您调用函数nav_click()时，this不再是点击处理程序中的内容。如果要使用nav_click()函数，则必须将this的值传递给该函数。你可以通过在函数中正确设置this来做到这一点：

nav_click.call(this);

或者，您可以将其作为普通参数传递并更改nav_click（）以使用该参数

nav_click(this);

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

仅供参考，函数内this的值取决于函数的调用方式。如果仅使用nav_click()这样的普通函数调用，则this将重置为window对象（正常JS模式）或undefined（JS严格模式）。< / p>

要明确将this设置为函数内的特定值，请使用.apply()或.call()。有关这些方法的说明，请参阅MDN页面here和here。

Answer 2

在匿名事件处理函数的上下文中，this引用事件发生的元素。出于这个原因，this没有引用您认为在第二种情况下的含义。

您可以将元素传递给函数，但是：

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

Answer 3

这种情况正在发生，因为你没有在回调函数中传递任何你需要传递元素的东西，这并没有引用#work所以你无法改变类这样做...

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

jquery addClass函数只在上半部分工作

3 个答案: