Javascript each（）只执行最后一个元素

我发现这个函数运行不正常。。。它只会使最后一个元素出现框

注：

我以前也试过下面的方法

$("article").each(function() {
    if(this.offset().top < arrowTop && 
       this.offset().top + 
       this.height() > arrowBottom) {
        $(".arrow_box").show();
    } else {
        $(".arrow_box").hide();
    }
});

$（“文章”）。每个（函数（）{
如果（此.offset（）.top<箭头和
此.offset（）.top+
this.height（）>箭头底部）{
$（“.arrow_box”）.show（）；
}否则{
$（“.arrow_box”）.hide（）；
}
});

最终解决方案：

var showing = false;
$("article").each(function() {
    if (showing) return;
    if($(this).offset().top < arrowTop && 
       $(this).offset().top + 
       $(this).height() > arrowBottom) {
        $(".arrow_box").show();
        showing = true;
    } else {
        $(".arrow_box").hide();
    }
});

var显示=false；
$（“文章”）。每个（函数（）{
如果（显示）返回；
if（$（this）.offset（）.top<箭头&&
$（此）.offset（）.top+
$（此）.height（）>箭头底部）{
$（“.arrow_box”）.show（）；
显示=真实；
}否则{
$（“.arrow_box”）.hide（）；
}
});
您似乎在说每篇文章都有自己的箭头框。
在您的函数中，您将检查所有文章的偏移量，但是
$（“.arrow\u box”）
选择器对于所有文章都是相同的，因此您将仅根据最后一篇文章的偏移量来隐藏/显示它

我不知道您的HTML树，但请尝试将选择器更改为

value.closest(".arrow_box").show();

更新

一旦在范围内找到一篇文章，就要取消each（）。可以这样做，例如：

var showing = false;
$("article").each(function() {
    if (showing) return;
    if(this.offset().top < arrowTop && 
       this.offset().top + 
       this.height() > arrowBottom) {
        $(".arrow_box").show();
        showing = true;
    } else {
        $(".arrow_box").hide();
    }
});

var显示=false；
$（“文章”）。每个（函数（）{
如果（显示）返回；
如果（此.offset（）.top<箭头和
此.offset（）.top+
this.height（）>箭头底部）{
$（“.arrow_box”）.show（）；
显示=真实；
}否则{
$（“.arrow_box”）.hide（）；
}
});
为什么要为不同的文章使用类？每种类型是否不止一种？或者你应该使用id属性？我不太明白代码应该做什么。你能设置fiddle吗？另外，您不必将HTML元素存储到数组中，您可以使用另一个each（）对它们进行迭代：对不起，我添加了更多内容，希望能让它更有意义。@David它们都是文章，我只是在没有想法的情况下这样做了。。。我也尝试了最后一段代码……但是您运行的javascript将根据最后一篇文章只显示/隐藏箭头框，因为最后一篇文章的位置将覆盖前三篇文章中的显示/隐藏。也许你可以指定更多你想要它做什么？每次一篇文章进入特定的范围…我希望$（“.arrow\u box”）div在没有文章的地方出现和消失。哦，好的，我明白了。然后，您需要触发javascript的评估，以便在用户滚动或类似操作时运行。我将用一些代码更新我的帖子。它在一个whilescrolling选项中。。。（我使用jQuery插件滚动条进行滚动）在滚动时调用此函数。原始问题中的链接可以显示我在做什么。每个蓝色块都是一篇文章。
value.closest(".arrow_box").show();

var showing = false;
$("article").each(function() {
    if (showing) return;
    if(this.offset().top < arrowTop && 
       this.offset().top + 
       this.height() > arrowBottom) {
        $(".arrow_box").show();
        showing = true;
    } else {
        $(".arrow_box").hide();
    }
});