[英]Load More Button with jQuery
I recently approached to javascript and jQuery;我最近接触了 javascript 和 jQuery; I would like to create a load more button for the image grid on my website, the grid have 4 column and right now 16 images with a hover overlay effect and with a tag .
我想在我的网站上为图像网格创建一个加载更多按钮,网格有 4 列,现在有 16 个带有悬停叠加效果和标签的图像。 I tried to follow many tutorials, I can't find and understand the mistake I made.
我试图遵循很多教程,但我无法找到并理解我犯的错误。
The code has been corrected in the following anwers代码已在以下答案中更正
$(function() { $(".Box-Hidden").slice(0, 8).show(); $("#loadMoreCont").on('click', function(e) { e.preventDefault(); $(".Box-Hidden:hidden").slice(0, 2).slideDown(); if ($(".Box-Hidden:hidden").length == 0) { $("#load").fadeOut('slow'); } $('html,body').animate({ scrollTop: $(this).offset().top }, 1500); }); });
.GridContent { width: 100%; height: auto; } .Portfolio { width: 95%; height: auto; margin: auto; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: auto; grid-gap: 5px; padding-top: 4%; } .Box-Hidden { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="GridContent"> <div class="Portfolio"> <!-----image 1 ------> <div class="Box-Hidden"> <a href="#" class="SpanProp1"> <div class="GridItemsCont"> <img src="#" class="gridimg"> <div class="infos infocolor1"> <p>logo</p> <button>Learn More</button> </div> </div> </a> </div> <!-----image 2 ------> <div class="Box-Hidden"> <a href="#" class="SpanProp2 "> <div class="GridItemsCont"> <img src="#"> <div class="infos infocolor2"> <p>logo</p> <button>Learn More</button> </div> </div> </a> </div> <!-----total 16 images-----> </div> </div> <div class="loadMoreCont"> <a href="#" id="loadMore">Load More</a> <a href="#"><img class="loadImg" src="images/arrow.png"></a> </div>
When you use当你使用
$("#loadMoreCont").on(...)
it is supposed you have a html tag having the id with that name:假设您有一个带有该名称的id的 html 标签:
<div id="loadMoreCont">
...
</div>
When you use当你使用
$(".loadMoreCont").on(...)
it is supposed you have a html tag having the class with that name:假设您有一个具有该名称的类的 html 标签:
<div class="loadMoreCont">
...
</div>
Update更新
$(function () {
$(".Box-Hidden").slice (0, 2).show(); // showing 2 initial images
$(".loadMoreCont").on('click', function (e) {
e.preventDefault();
$(".Box-Hidden:hidden").slice(0,2).slideDown(); // adding 2 images on load more click
if ($(".Box-Hidden:hidden"). length == 0){
$("#load").fadeOut ('slow');
}
$('html,body').animate({
scrollTop: $(this).offset().top
}, 1500);
});
});
Your code seems work fine.您的代码似乎工作正常。 I commented out some interesting lines.
我注释掉了一些有趣的台词。 Hope this helps.
希望这可以帮助。
your #loadMoreCont JS file on line 4 is targeted at an ID (#).第 4 行的 #loadMoreCont JS 文件针对的是 ID (#)。 but on your html loadMoreCont as a class (.)
但是在你的 html loadMoreCont 作为一个类 (.)
The question is: " I would like to create a load more button for the image grid on my website, the grid have 4 column and right now 16 images with a hover overlay effect and with a tag . I tried to follow many tutorials, I can't find and understand the mistake I made"问题是:“我想在我的网站上为图像网格创建一个加载更多按钮,网格有 4 列,现在有 16 个带有悬停叠加效果和标签的图像。我尝试遵循许多教程,我无法找到并理解我犯的错误”
Here the updated code after the kind correction of the users @Kurohige and @WkL这里是用户@Kurohige 和@WkL 修改后的更新代码
HTML HTML
<div class="GridContent">
<div class="Portfolio">
<!-----image 1 ------>
<div class="Box-Hidden">
<a href="#" class="SpanProp1">
<div class="GridItemsCont">
<img src="#" class="gridimg">
<div class="infos infocolor1">
<p>logo</p>
<button>Learn More</button>
</div>
</div>
</a>
</div>
<!-----image 2 ------>
<div class="Box-Hidden">
<a href="#" class="SpanProp2 ">
<div class="GridItemsCont">
<img src="#">
<div class="infos infocolor2">
<p>logo</p>
<button>Learn More</button>
</div>
</div>
</a>
</div>
<!-----total 16 images----->
</div>
</div>
<div class="loadMoreCont">
<a href="#" id="loadMore">Load More</a>
<a href="#"><img class="loadImg" src="images/arrow.png"></a>
</div>`
CSS CSS
.GridContent {
width: 100%;
height: auto;
}
.Portfolio {
width: 95%;
height: auto;
margin: auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto;
grid-gap: 5px;
padding-top: 4%;
}
.Box-Hidden {
display: none;
}
JQUERY查询
<script>
$(function () {
$(".Box-Hidden").slice (0, 8).show();
$(".loadMoreCont").on('click', function (e) {
e.preventDefault();
$(".Box-Hidden:hidden"). slice(0,2).slideDown();
if ($(".Box-Hidden:hidden"). length == 0){
$("#load").fadeOut ('slow');
}
$('html,body').animate({
scrollTop: $(this).offset().top
}, 1500);
});
});
</script>
<script src="jQuery/jquery-3.4.1.js"></script>
Some issues in your code are that the classes and ID's are mixed up in the JS.代码中的一些问题是类和 ID 在 JS 中混淆了。 In particular the
loadMore
button and how many items you're choosing to show via "slice".特别是
loadMore
按钮以及您选择通过“切片”显示的项目数量。 It would also help to use a more general or "semantic" friendly name for your containers instead of Box-Hidden
because it's not always hidden and it's purpose is more like a card block, so naming it something like "card" might be best.为您的容器使用更通用或“语义”友好的名称而不是
Box-Hidden
也会有所帮助,因为它并不总是隐藏的,而且它的用途更像是卡片块,因此将其命名为“卡片”之类的名称可能是最好的。 The example below shows the Load More button and then disappears after displaying the rest of the cards.下面的示例显示了“加载更多”按钮,然后在显示其余卡片后消失。
// slice is choosing the first 2 instances of "Box-hidden" and showing them $(".Box-Hidden").slice(0, 2).show(); // if there are Box-Hidden set to display:none (hidden) then show the loadMore button if ($(".Box-Hidden:hidden").length != 0) { $("#loadMore").show(); } $("#loadMore").on('click', function(e) { e.preventDefault(); $(".Box-Hidden:hidden").slice(0, 2).slideDown(); // if there are no more hidden Box-Hidden's then hide the loadMore button if ($(".Box-Hidden:hidden").length == 0) { $("#loadMore").fadeOut('slow'); } // This is not related to the show more, this just brings you back up the page $('html,body').animate({ scrollTop: $(this).offset().top }, 1500); });
.GridContent { width: 100%; height: auto; } .Portfolio { width: 95%; height: auto; margin: auto; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: auto; grid-gap: 5px; padding-top: 4%; } .Box-Hidden { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="GridContent"> <div class="Portfolio"> <!-----image A ------> <div class="Box-Hidden" style="display: none;"> <a href="#" class="SpanProp2 "> <div class="GridItemsCont"> <img src="http://placekitten.com/200/300?image=1"> <div class="infos infocolor2"> <p>logo</p> <button>Learn More</button> </div> </div> </a> </div> <!-----image B ------> <div class="Box-Hidden" style="display: none;"> <a href="#" class="SpanProp2 "> <div class="GridItemsCont"> <img src="http://placekitten.com/200/300?image=2"> <div class="infos infocolor2"> <p>logo</p> <button>Learn More</button> </div> </div> </a> </div> <!-----image 1 ------> <div class="Box-Hidden" style="display: none;"> <a href="#" class="SpanProp1"> <div class="GridItemsCont"> <img src="http://placekitten.com/200/300?image=3" class="gridimg"> <div class="infos infocolor1"> <p>logo</p> <button>Learn More</button> </div> </div> </a> </div> <!-----image 2 ------> <div class="Box-Hidden" style="display: none;"> <a href="#" class="SpanProp2 "> <div class="GridItemsCont"> <img src="http://placekitten.com/200/300?image=4"> <div class="infos infocolor2"> <p>logo</p> <button>Learn More</button> </div> </div> </a> </div> <!-----total 16 images-----> </div> </div> <div class="loadMoreCont"> <a href="#" id="loadMore">Load More</a> <a href="#"><img class="loadImg" src="images/arrow.png"></a> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.