Question

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

注意：<aside>是位置：固定;而且我确实知道这不是＆＃34;正确的＆＃34;使用<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();
        }
    });
}

以下是我可以对小提琴做的最好的事情，因为我无法使小提琴正常工作...（对不起） 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();

<强>更新

您希望在范围内找到文章后取消每个（）。例如，这可以这样做：

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

jquery .each（）只做最后一个元素

1 个答案: