这个小提琴每次只返回一个值?

时间:2015-04-19 11:40:26

标签: javascript jquery html css

我看到这个fiddle已经回复了question,我知道each如何在jquery中工作,它会对我们提供的所有元素做一件事。但是在这个小提琴中它只是根据滚动返回一个东西,我在我自己的计算机和我自己的项目中做了类似的东西但它返回了所有元素separator

1 个答案:

答案 0 :(得分:2)

代码实际上并不只设置其中一个值。根据滚动位置,它可以设置多个值,但您只能看到元素中的最后一个值。

if语句会跳过窗口下方的值。在开始时,它仅设置2015值。如果您在底部,则会将文本设置为2015,然后2014,然后2013,然后2012

如果您观看控制台窗口,您将看到所有已设置的文本。当你在底部时,每个滚动动作依次设置所有文本。


请注意,代码实际上并未显示窗口中可见元素的文本,而是显示窗口内或窗口上方的 last 元素(以DOM顺序排列) 。如果您使用绝对或相对定位以不同的顺序显示元素,则代码将无效。


如果在循环之前而不是循环内部调用scrollTop一次,代码执行的工作就会减少,并将文本存储在变量中并将其放在循环之后的元素中,而不是更新循环内的元素:

$(document).scroll(function(){
    var text, top = $(window).scrollTop();
    $('.separator').each(function(){
        if (top > $(this).offset().top) {
           text = $(this).data('year');
        }
    });
    $('.header').text(text);
    console.log(text);
});

演示:http://jsfiddle.net/Guffa/atq0sh6y/5/