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();
    }
});