Question

我创建了一个小jquery脚本，我在自定义函数中使用（this）时遇到问题。

这是代码：

jQuery("li").click(function()
{
    var scrollTop = jQuery(window).scrollTop();
    if(scrollTop > 0)
    {
        jQuery('html, body').animate( { scrollTop: 0 }, 'slow', function()
        {
            fadeItems();
        });

    }
    else
    {
        fadeItems();    
    }

});

function fadeItems()
{       
    var slogan = jQuery(this).children('p').html();

    jQuery('#slogan_text').fadeOut(150, function(){
        jQuery('#slogan_text').fadeIn(150).html(slogan);
    });

    var content = jQuery(this).children('#post_content_large').html();
    jQuery('#content_view').html(content).hide();

    var status = jQuery("#readMore").html();

    if(status == 'Verbergen')
    {
        jQuery('#content_view').fadeIn(500, function(){
            jQuery('#content_view').fadeIn(500).html(content);
        });
    }

    var title = jQuery(this).children('h3').html();

    jQuery('#title_content').fadeOut(150, function(){
        jQuery('#title_content').fadeIn(150).html(title);
    });
}

因此，当单击列表项时，该函数会运行，但是（this）的值为空

有人知道如何解决这个问题吗？

提前致谢！

Answer 1

因为你必须将它传递给函数以便它可以使用它（也可以使用与此不同的东西，不那么令人困惑（EDITED因为你想要点击的项目）

    var clicked = this;
    jQuery('html, body').animate( { scrollTop: 0 }, 'slow', function()
    {
        fadeItems(clicked);
    });

function fadeItems(el)
{       
var slogan = jQuery(el).children('p').html();

Answer 2

使用apply：

fadeItems.apply(this);

这样你就可以指定函数调用的上下文（在this中手动指定fadeItems的值）

编辑：正如@KevinB所述，您需要在父函数this中使用别名var that = this;，然后将that传递给函数fadeItems.apply(that);。

Answer 3

.call在这里很有用：

jQuery("li").click(function () {
    var self = this;
    var scrollTop = jQuery(window).scrollTop();
    if(scrollTop > 0) {
        jQuery('html, body').animate( { scrollTop: 0 }, 'slow', function() {
            fadeItems.call(self);
        });    
    }
    else {
        fadeItems.call(self);
    }    
});

jquery在自定义函数中使用（this）

3 个答案: