我正在玩Web开发,但似乎无法使我的加载按钮正常工作。我能够隐藏这些元素;但是,当按下加载按钮时,我无法显示它们
的HTML
<div class="portfolio_area">
<div class="portfolio_wrap"
<div class=" single_gallery">
<div class="box-hidden">
<div class="thumb">
<img src="images/mm_mockups/Edges3.png" alt="">
</div>
<div class="gallery_hover">
<div class="hover_inner">
<span>Mobile App</span>
<a href="work_details.html">
<h3>Ubar Mobile App</h3>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- </div> -->
<div class="more_works text-center">
<a href="#" id="loadMore">Load More</a>
</div>
</div>
的CSS
.portfolio_area .portfolio_wrap .single_gallery .box-hidden {
display: none;
}
JS
$(function () {
$(".box-hidden").slice(0,6). show();
$("#loadmore").on('click', function(e){
e.prventDefault();
$(".box-hidden:hidden").slice(0,3).slideDown();
if ($(".box-hidden:hidden").length == 0) {
$("#load").fadeOut('slow');
}
$('html,body').animate({
scrollTop: $(this).offset().top
}, 1500);
});
});
我相信问题出在我的JS中,我真的很希望得到帮助!
Looks like a typo.
$("#loadmore").on('click', function(e){
should be$("#loadMore").on('click', function(e){
You wantloadMore
notloadmore