javascript - jquery .each() 只做最后一个元素

Question

我遇到此函数无法正确运行的问题...它只会使最后一个元素出现该框。

注释:<aside>位置:固定；我确实知道这不是 <article> 的“正确”使用标签，但它现在可以帮助我区分它们。

HTML:

    <aside class="character">
        <div class="personHolder">
            <div class="person"></div>
        </div>
        <div class="arrow_box"></div>
    </aside>
    <main class="main">
        <section class="sections" id="Home">
            <article class="article1">
                <h1 class="sectionHeaders">Home</h1>
            </article>
        </section>
        <section class="sections" id="About">
            <article class="article2">                
                <h1 class="sectionHeaders">About Me</h1>
            </article>
        </section>
        <section class="sections" id="Projects">
            <article class="article3">                
                <h1 class="sectionHeaders">Projects</h1>
            </article>
        </section>
        <section class="sections" id="Contact">
            <article class="article3">                
                 <h1 class="sectionHeaders">Contact Me</h1>
            </article>
        </section>
    </main>

JavaScript/JQuery:

function checkElement() {
    var article1 = $(".article1");
    var article2 = $(".article2");
    var article3 = $(".article3");
    var article4 = $(".article4");
    var arrowTop = 170;
    var arrowBottom = 258;

    var articles = [article1, article2, article3, article4];

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

以下是我可以对 fiddle 做的最好的事情，因为我无法使 fiddle 正常工作......(抱歉) Free Website Host

我之前也尝试过以下方法。

$("article").each(function() {
    if(this.offset().top < arrowTop && 
       this.offset().top + 
       this.height() > arrowBottom) {
        $(".arrow_box").show();
    } else {
        $(".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();
    }
});

Answer 1

您似乎是在说每篇文章都有自己的箭头框。 在您的函数中，您将检查所有文章的偏移量，但所有文章的 $(".arrow_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();
    }
});