Question

我的页面上有多个类别和一个scrollnav js。在我的HTML中，我有hidden额外的选项，并尝试通过javascript显示它们。

它在codepen http://localhost:8080/xxxxxx/resources/xxxxx.html

中看到了这个

它适用于codepen，但不适用于我的项目。这是我的HTML

<div class="col-md-3 col-xs-0 side-nav">
</div>
<div class="col-md-9 col-xs-12">
    <div class="main container">
        <article class="post__article">
            <section class="feature-section row-fluid" id="templates">
                <h2 class="main-feature-heading" id="scrollNav-1">loren ipsum</h2>
                <div class="feature text-center ">
                    <img src="../img/features_screenshots/import.png" class="feature-screenshot">
                    <h3 class="feature-heading">
                                        loren ipsum
                                    </h3>
                    <p>
                        loren ipsumloren ipsumloren ipsumloren ipsumloren ipsum
                    </p>
                </div>
                <div class="feature text-center ">
                    <img src="../img/features_screenshots/filters3.PNG" class="feature-screenshot">
                    <h3 class="feature-heading">
                                        loren ipsum
                                    </h3>
                    <p>
                        loren ipsumloren ipsumloren ipsumloren ipsum
                    </p>
                </div>
                <div class="feature text-center ">
                    <img src="../img/features_screenshots/groups.png" class="feature-screenshot">
                    <h3 class="feature-heading">
                                        loren ipsum
                                    </h3>
                    <p>
                        loren ipsumloren ipsumloren ipsumloren ipsumloren ipsum
                    </p>
                </div>
                <div class="feature hide text-center ">
                    <img src="../img/features_screenshots/teams.png" class="feature-screenshot">
                    <h3 class="feature-heading">
                                        loren ipsum
                                    </h3>
                    <p>
                        loren ipsumloren ipsumloren ipsumloren ipsumloren ipsumloren ipsum
                    </p>
                </div>
                <div class="feature hide text-center ">
                    <img src="../img/features_screenshots/campaign.png" class="feature-screenshot">
                    <h3 class="feature-heading">
                                        loren ipsum
                                    </h3>
                    <p>
                        loren ipsumloren ipsumloren ipsumloren ipsumloren ipsumloren ipsum
                    </p>
                </div>
                <div class="feature hide text-center ">
                    <img src="../img/features_screenshots/permission.png" class="feature-screenshot">
                    <h3 class="feature-heading">
                                        loren ipsum
                                    </h3>
                    <p>
                        loren ipsumloren ipsumloren ipsumloren ipsumloren ipsumloren ipsumloren ipsum
                    </p>
                </div>
                <div class="clearfix"></div>
                <a href="#" id="loadMore"><i class="fa fa-3x fa-angle-down"></i></a>
            </section>
            <section class="feature-section row-fluid" id="manuals">
                <h2 class="main-feature-heading" id="scrollNav-2">loren ipsum</h2>
                <div class="feature text-center ">
                    <img src="../img/features_screenshots/iphone-android.png" class="feature-screenshot">
                    <h3 class="feature-heading">
                                    loren ipsum
                                </h3>
                    <p>
                        loren ipsumloren ipsumloren ipsumloren ipsumloren ipsum
                    </p>
                </div>
                <div class="feature text-center ">
                    <img src="../img/features_screenshots/android-sync.png" class="feature-screenshot">
                    <h3 class="feature-heading">
                                    loren ipsum
                                </h3>
                    <p>
                        loren ipsumloren ipsumloren ipsumloren ipsumloren ipsum
                    </p>
                </div>
                <div class="feature text-center ">
                    <img src="../img/features_screenshots/android-groups.png" class="feature-screenshot">
                    <h3 class="feature-heading">
                                    loren ipsum
                                </h3>
                    <p>
                        loren ipsumloren ipsumloren ipsumloren ipsumloren ipsum
                    </p>
                </div>
                <div class="feature hide text-center ">
                    <img src="../img/features_screenshots/iphone-map.png" class="feature-screenshot">
                    <h3 class="feature-heading">
                                    loren ipsum
                                </h3>
                    <p>
                        loren ipsumloren ipsumloren ipsumloren ipsumloren ipsum
                    </p>
                </div>
                <div class="feature hide text-center ">
                    <img src="../img/features_screenshots/iphone-custom-fields.png" class="feature-screenshot">
                    <h3 class="feature-heading">
                                   loren ipsum
                                </h3>
                    <p>
                        loren ipsumloren ipsumloren ipsumloren ipsum
                    </p>
                </div>
                <div class="feature hide text-center ">
                    <img src="../img/features_screenshots/iphone-canvass.png" class="feature-screenshot">
                    <h3 class="feature-heading">
                                    loren ipsum
                                </h3>
                    <p>
                       loren ipsumloren ipsumloren ipsumloren ipsumloren ipsum
                    </p>
                </div>
                <div class="clearfix"></div>
            </section>
            <a href="#" id="loadMore"><i class="fa fa-3x fa-angle-down"></i></a>
            <section class="feature-section row-fluid" id="advertise">
                <h2 class="main-feature-heading" id="scrollNav-3">loren ipsum</h2>
                <div class="feature text-center ">
                    <img src="../img/features_screenshots/results.png" class="feature-screenshot">
                    <h3 class="feature-heading">
                                    loren ipsum
                                </h3>
                    <p>
                        loren ipsumloren ipsumloren ipsumloren ipsumloren ipsum
                    </p>
                </div>
                <div class="feature text-center ">
                    <img src="../img/features_screenshots/map-analytics.png" class="feature-screenshot">
                    <h3 class="feature-heading">
                                    loren ipsum
                                </h3>
                    <p>
                        loren ipsumloren ipsumloren ipsumloren ipsum
                    </p>
                </div>
                <div class="feature text-center ">
                    <img src="../img/features_screenshots/customfield-analytics.png" class="feature-screenshot">
                    <h3 class="feature-heading">
                                   loren ipsum
                                </h3>
                    <p>
                        loren ipsumloren ipsumloren ipsumloren ipsum
                    </p>
                </div>
                <div class="feature hide text-center ">
                    <img src="../img/features_screenshots/surveys.png" class="feature-screenshot">
                    <h3 class="feature-heading">
                                   loren ipsum
                                </h3>
                    <p>
                        loren ipsumloren ipsumloren ipsumloren ipsumloren ipsumloren ipsum
                    </p>
                </div>
                <div class="feature hide text-center ">
                    <img src="../img/features_screenshots/canvasser-paths.png" class="feature-screenshot">
                    <h3 class="feature-heading">
                                    loren ipsum
                                </h3>
                    <p>
                       loren ipsumloren ipsumloren ipsumloren ipsumloren ipsumloren ipsumloren ipsum
                    </p>
                </div>
                <div class="clearfix"></div>
            </section>
            <a href="#" id="loadMore"><i class="fa fa-3x fa-angle-down"></i></a>
        </article>
    </div>
</div>

这是js

  $(function () {
    $("#templates-loadMore").on('click', function (e) {
        e.preventDefault();
        $("#templates >.feature:hidden").slice(0, 2).slideDown();
        if ($("#templates >.feature:hidden").length == 0) {
            $("#loadMore").fadeOut('slow');
        }
        $('html,body').animate({
            scrollTop: $(this).offset().top
        }, 1500);
    });
    $("#manuals-loadMore").on('click', function (e) {
        e.preventDefault();
        $("#manuals >.feature:hidden").slice(0, 2).slideDown();
        if ($("#manuals >.feature:hidden").length == 0) {
            $("#loadMore").fadeOut('slow');
        }
        $('html,body').animate({
            scrollTop: $(this).offset().top
        }, 1500);
    });
    $("#advertise-loadMore").on('click', function (e) {
        e.preventDefault();
        $("#advertise >.feature:hidden").slice(0, 2).slideDown();
        if ($("#advertise >.feature:hidden").length == 0) {
            $("#loadMore").fadeOut('slow');
        }
        $('html,body').animate({
            scrollTop: $(this).offset().top
        }, 1500);
    });
});

我使用过#templates >.feature:hidden，因为我有多个类别，我想加载更多只有用户点击过的选项。

Answer 1

您的代码中发现了一些小问题。

$("#templates >.feature:hidden").show().slice(0, 2)

以上行是错误的。根据你提供的codepen url，它将是

$("#templates >.feature:hidden").slice(0, 2).slideDown();

另外加载更多按钮应该在最后。

之后会是这样的。

$(function () {
        $("#templates >.feature").slice(0, 2).show();
        $("#loadMore").on('click', function (e) {
            e.preventDefault();
            $("#templates >.feature:hidden").slice(0, 2).slideDown();
            if ($("#templates >.feature:hidden").length == 0) {
                $("#loadMore").fadeOut('slow');
            }
            $('html,body').animate({
                scrollTop: $(this).offset().top
            }, 1500);
        });

    });

#templates >.feature {
    display:none;
}

<div class="col-md-3 col-xs-0 side-nav">
</div>
<div class="col-md-9 col-xs-12">
    <div class="main container">
        <article class="post__article">
            <section class="feature-section row-fluid" id="templates">
                <h2 class="main-feature-heading" id="scrollNav-1">loren ipsum</h2>
                

                <div class="feature text-center ">
                    <img src="../img/features_screenshots/import.png" class="feature-screenshot">
                    <h3 class="feature-heading">
                                        loren ipsum
                                    </h3>
                    <p>
                        loren ipsum loren ipsumloren ipsumloren ipsumloren ipsumloren ipsumloren ipsum
                    </p>
                </div>

                <div class="feature text-center ">
                    <img src="../img/features_screenshots/filters3.PNG" class="feature-screenshot">
                    <h3 class="feature-heading">
                                        loren ipsum
                                    </h3>
                    <p>
                        loren ipsumloren ipsumloren ipsumloren ipsumloren ipsumloren ipsum
                    </p>
                </div>
                <div class="feature text-center ">
                    <img src="../img/features_screenshots/groups.png" class="feature-screenshot">
                    <h3 class="feature-heading">
                                        loren ipsum
                                    </h3>
                    <p>
                        loren ipsumloren ipsumloren ipsumloren ipsumloren ipsum
                    </p>
                </div>
 
                <div class="feature hide text-center ">
                    <img src="../img/features_screenshots/teams.png" class="feature-screenshot">
                    <h3 class="feature-heading">
                                        loren ipsum
                                    </h3>
                    <p>
                        loren ipsumloren ipsumloren ipsumloren ipsumloren ipsumloren ipsum
                    </p>
                </div>
                <div class="feature hide text-center ">
                    <img src="../img/features_screenshots/campaign.png" class="feature-screenshot">
                    <h3 class="feature-heading">
                                        loren ipsum
                                    </h3>
                    <p>
                        loren ipsumloren ipsumloren ipsumloren ipsumloren ipsum
                    </p>
                </div>
                <div class="feature hide text-center ">
                    <img src="../img/features_screenshots/permission.png" class="feature-screenshot">
                    <h3 class="feature-heading">
                                        loren ipsum
                                    </h3>
                    <p>
                        loren ipsumloren ipsumloren ipsumloren ipsumloren ipsumloren ipsumloren ipsum
                    </p>
                </div>
                <div class="clearfix"></div>
            </section>
        </article>
    </div>
</div>

<a href="#" id="loadMore">Load More</a>


  <script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.js"></script>

小提琴：https://jsfiddle.net/tintucraju/zpu547rf/

<强>更新

在您的更新中，您已将点击事件分配给

#templates-loadMore,#manuals-loadMore,#advertise-loadMore

但是你的html中没有。所以改变id

<a href="#" id="loadMore"><i class="fa fa-3x fa-angle-down"></i>Load more advertise</a>

到

<a href="#" id="templates-loadMore"><i class="fa fa-3x fa-angle-down"></i>Load more advertise</a>

这是更新的小提琴https://jsfiddle.net/tintucraju/zpu547rf/1/

此外，最初所有项目都是隐藏的，所以如果你想在加载时首先显示几条记录，那么就这样做。

  $("#templates >.feature").slice(0, 2).show();
  $("#manuals>.feature").slice(0, 2).show();
  $("#advertise>.feature").slice(0, 2).show();

Answer 2

我快到了。

这是如何解决我的问题。

 $("#templates-loadMore").on('click', function (e) {
    e.preventDefault();
    $("#templates .feature:hidden").slice(0, 3).toggleClass("hide");
    if ($("#templates .feature:hidden").length == 0) {
        $("#loadMore").fadeOut('slow');
    }
    $('html,body').animate({
        scrollTop:( $(this).offset().top - $(window).height())
    }, 1500);
});

现在只需弄清楚为什么这不起作用。

if ($("#templates .feature:hidden").length == 0) {
            $("#loadMore").fadeOut('slow');
        }

当我将它粘贴到控制台时，它会显示undefined。

加载更多javascript无法正常工作

2 个答案: