Question

在2016年2月16日更新了新代码，以反映评论中发现的错误

我的路标在使用以下代码的页面上正常工作。请注意，我使用的是插件版本3.1.1，但我仍然使用类似于插件版本2.x的jQuery语法来处理一些复杂的选择器。此代码正在运行：

var stickTop = wrapper.waypoint({
    handler: function(direction){         
        var len = $(this.element).closest('.ctable').find('div.ctable-row').length; 
        if ((direction === 'down') && (len > 1)) {
            $(this.element).closest('.ctable').find(stickTarget).addClass('stuck').css("top", $pageHeadOffset );
        }
        else if ((direction === 'up') && (len > 1)) {
            $(this.element).closest('.ctable').find(stickTarget).removeClass('stuck');
        }
    }, 
    offset: $pageHeadOffset,
});

这仍然很好并且工作正常，但我在页面上有另一个元素调整大小，有效地使页面更长。为了解决这个问题，我尝试在另一个点击目标上调用Waypoint.refreshAll();和stickTop.context.refresh();，如下所示：

$('.page-info-link').click(function(){
    $('.page-info').toggleClass('closed');
    $('.page-info-message').slideToggle();
    Waypoint.refreshAll();
});

但我无法让刷新准确地发挥作用。

有没有办法使用上面类似jQuery的语法（没有传递元素：选项并仍然调用刷新？

更新2/16：

此新代码现在会触发控制台错误：

$('.page-info-link').click(function(){
    $('.page-info').toggleClass('closed')
    $('.page-info-message').slideToggle()
    stickTop.refresh()
});

错误：“未定义不是函数”

Answer 1

这里有两个问题：

stickTop.refresh()：我不确定你为什么改变这个。首先，stickTop是一个数组，因为$.fn.waypoint返回一个Waypoint实例数组，一个用于jQuery对象中的每个匹配元素。其次，refresh不是Waypoint实例上的方法，它是Context上的方法。 TLDR：坚持Waypoint.refreshAll()。
slideToggle是一个jQuery动画。你想要做的是在动画完成后调用刷新，但它是一个异步函数。通过直接调用refreshAll，您可以在动画开始之前进行刷新。您需要在动画的complete回调中调用refresh。

最终结果：

$('.page-info-message').slideToggle(function() {
  Waypoint.refreshAll()
})

context.refresh（）和/或Waypoint.refreshAll（）不起作用？

1 个答案: