Question

我有一些文章会在点击时向用户显示模态，我试图做的是增加一个加载按钮，因为该页面将来可能有很多盒子。当我使用此代码时，只显示一个div并且loadmore按钮不起作用。

HTML代码：

<div id="mybox">Content</div>
<div id="mybox">Content</div>
<div id="mybox">Content</div>
<div id="mybox">Content</div>
<div id="mybox">Content</div>
<div id="mybox">Content</div>
<div id="mybox">Content</div>
<div id="mybox">Content</div>
<div id="mybox">Content</div>
<div id="mybox">Content</div>
<div id="mybox">Content</div>
<div id="mybox">Content</div>
<div id="mybox">Content</div>
<div id="mybox">Content</div>
<div id="mybox">Content</div>
<div id="mybox">Content</div>

<a href="#" id="loadMore">Load More</a>

<p class="totop"> 
    <a href="#top">Back to top</a> 
</p>

JQuery代码：

/*
    Load more content with jQuery - May 21, 2013
    (c) 2013 @ElmahdiMahmoud
*/   

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

$('a[href=#top]').click(function () {
    $('body,html').animate({
        scrollTop: 0
    }, 600);
    return false;
});

$(window).scroll(function () {
    if ($(this).scrollTop() > 50) {
        $('.totop a').fadeIn();
    } else {
        $('.totop a').fadeOut();
    }
});

Answer 1

id应该始终是唯一的，并且永远不会超过您网站上每页的内容。如果您将id="mybox"更改为class="mybox"并更改jquery以匹配它，那么它可以正常工作。

<强>演示

＆＃13;

$(function () {
    $(".mybox").slice(0, 4).show();
    $("#loadMore").on('click', function (e) {
        e.preventDefault();
        $(".mybox:hidden").slice(0, 4).slideDown();
        if ($(".mybox:hidden").length == 0) {
            $("#load").fadeOut('slow');
        }
        $('html,body').animate({
            scrollTop: $(this).offset().top
        }, 1500);
    });
});

$('a[href=#top]').click(function () {
    $('body,html').animate({
        scrollTop: 0
    }, 600);
    return false;
});

$(window).scroll(function () {
    if ($(this).scrollTop() > 50) {
        $('.totop a').fadeIn();
    } else {
        $('.totop a').fadeOut();
    }
});

＆＃13;

.mybox{
display:none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mybox">Content</div>
<div class="mybox">Content</div>
<div class="mybox">Content</div>
<div class="mybox">Content</div>
<div class="mybox">Content</div>
<div class="mybox">Content</div>
<div class="mybox">Content</div>
<div class="mybox">Content</div>
<div class="mybox">Content</div>
<div class="mybox">Content</div>
<div class="mybox">Content</div>
<div class="mybox">Content</div>
<div class="mybox">Content</div>
<div class="mybox">Content</div>
<div class="mybox">Content</div>
<div class="mybox">Content</div>

<a href="#" id="loadMore">Load More</a>

<p class="totop"> 
    <a href="#top">Back to top</a> 
</p>

＆＃13;

模式属性不能用于输入元素

1 个答案: