Javascript 使用jQuery加载更多按钮

我最近接触了javascript和jQuery；我想为我的网站上的图像网格创建一个加载更多按钮，网格有4列，现在有16个带有悬停覆盖效果和标签的图像。我试着跟随很多教程，我无法发现和理解我犯的错误

该代码已在以下步骤中更正

$（函数（）{
$（“.Box隐藏”）.slice（0,8.show（）；
$（“#loadMoreCont”）。在（'单击'，函数（e）{
e、 预防默认值（）；
$（“.Box Hidden:Hidden”）.slice（0,2）.slideDown（）；
if（$（“.Box Hidden:Hidden”）.length==0）{
$（“#加载”）.fadeOut（'slow'）；
}
$（'html，body'）。设置动画({
scrollTop:$（this）.offset（）.top
}, 1500);
});
});
.GridContent{
宽度：100%；
高度：自动；
}
.投资组合{
宽度：95%；
高度：自动；
保证金：自动；
显示：网格；
网格模板列：重复（4，1fr）；
网格模板行：自动；
网格间距：5px；
垫面：4%；
}
.隐藏的盒子{
显示：无；
}

第4行的#loadMoreCont JS文件的目标是一个ID（#）。
但是在html中，当您使用

$("#loadMoreCont").on(...)

$(".loadMoreCont").on(...)

假设您有一个html标记，其id为该名称的id：

<div id="loadMoreCont">
...
</div>

<div class="loadMoreCont">
...
</div>

假设您有一个html标记，该标记具有该名称的类：

<div id="loadMoreCont">
...
</div>

<div class="loadMoreCont">
...
</div>

您的代码似乎工作正常。我评论了一些有趣的台词。
希望这能有所帮助。
问题是：“我想在我的网站上为图像网格创建一个加载更多按钮，网格有4列，现在有16个带有悬停覆盖效果和标签的图像。我尝试了很多教程，我找不到并理解我犯的错误”

这里是经过用户@Kurohige和@WkL种类修正后的更新代码

HTML

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> 


$（函数（）{
$（“.Box隐藏”）.slice（0,8.show（）；
$（.loadMoreCont”）。在（'click'，函数（e）{
e、 预防默认值（）；
$（“.Box Hidden:Hidden”）.slice（0,2）.slideDown（）；
if（$（“.Box Hidden:Hidden”）.length==0）{
$（“#加载”）.fadeOut（'slow'）；
}
$（'html，body'）。设置动画({
scrollTop:$（this）.offset（）.top
}, 1500);
});
});
代码中的一些问题是JS中的类和ID混淆了。特别是
loadMore
按钮，以及您选择通过“切片”显示的项目数量。为容器使用一个更通用或“语义”友好的名称，而不是
Box Hidden
，这也会有所帮助，因为它并不总是隐藏的，而且它的用途更像一个卡片块，所以最好将其命名为“card”。下面的示例显示加载更多按钮，然后在显示其余卡后消失


//slice正在选择“Box hidden”的前两个实例并显示它们
$（“.Box隐藏”）.slice（0,2.show（）；
//如果有框隐藏设置为显示：无（隐藏），则显示loadMore按钮
如果（$（“.Box Hidden:Hidden”）.length！=0）{
$（“#加载更多”）.show（）；
}
$（“#加载更多”）。关于（'单击'，函数（e）{
e、 预防默认值（）；
$（“.Box Hidden:Hidden”）.slice（0,2）.slideDown（）；
//如果没有更多隐藏框隐藏，则隐藏loadMore按钮
if（$（“.Box Hidden:Hidden”）.length==0）{
$（“#加载更多”）.fadeOut（'slow'）；
}
//这与节目无关，这只是让你回到页面
$（'html，body'）。设置动画({
scrollTop:$（this）.offset（）.top
}, 1500);
});
.GridContent{
宽度：100%；
高度：自动；
}
.投资组合{
宽度：95%；
高度：自动；
保证金：自动；
显示：网格；
网格模板列：重复（4，1fr）；
网格模板行：自动；
网格间距：5px；
垫面：4%；
}
.隐藏的盒子{
显示：无；
}

谢谢！我修正了错误，但仍然不起作用。我在下面的答案中评论了更新的代码，非常感谢！非常感谢。我修复了错误，但仍然不起作用。这应该是对问题中代码的更新，然后您可以在问题下方的评论中提到您已更新了代码。如果您觉得这很有帮助并且答案正确，请单击此答案旁边的箭头来标记它。非常感谢！问题似乎是我没有把
<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>