无法让我的负载更多 div 工作

我试图在过去2个小时内对此问题进行排序。我没有JavaScript的经验，希望在这里获得一些帮助。有人知道文件怎么了吗？我认为这与JavaScript文件有关。感谢提前的帮助！

ps！：它在JSfiddle和Codepen中似乎正常工作，但当我在PC中使用它时效果不佳。

var $group = $('.item');
$(".load-more").click(function() {
  var $hidden = $group.filter(':hidden:first');
  $hidden.addClass('active');
  $hidden.next().addClass('active');
  $hidden.next().next().addClass('active');
  // remove Load More Div - if no more divs
  if (!$hidden.next('.item').length) {
    $(this).remove();
  }
});

.item {
  background-color: #ddd;
  margin: 0;
  padding: 0;
  text-align: center;
  width: 33.33%;
  float: left;
  height: 60px;
  transition: 0.3s all;
  box-shadow: inset 0px 0px 0px 1px green;
  display: none;
}
.item.active {
  display: block;
}
.load-more {
  cursor: pointer;
  float: left;
  width: 100%;
  user-select: none;
  -webkit-user-select: none;
  background-color: green;
  color: white;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<main>
  <div class="item active">
    First div
  </div>
  <div class="item active">
    hidden, opened after click
  </div>
  <div class="item active">
    hidden, opened after click
  </div>
  <div class="item">
    hidden, opened after click
  </div>
  <div class="item">
    hidden, opened after click
  </div>
  <div class="item">
    hidden, opened after click
  </div>
  <div class="item">
    hidden, opened after click
  </div>
  <div class="load-more">
    <p>Load More</p>
  </div>

解决方案1

将您的js代码在文档中准备好事件回电。

$( document ).ready(function(){ 
    //insert you js code here
})

这将有助于正确绑定点击事件

解决方案2

在"堆栈流"代码段中，您的示例如下保存。只需复制跟随index.html并尝试在浏览器中打开它它将起作用因为您的JS代码在body标签内部，并且在加载文档后会发生点击事件绑定。尝试将您的JS代码放入head标签中，因为文档尚未加载

，它将不起作用。

<!DOCTYPE html>
<html>
<head>
    <style>
        .item {
  background-color: #ddd;
  margin: 0;
  padding: 0;
  text-align: center;
  width: 33.33%;
  float: left;
  height: 60px;
  transition: 0.3s all;
  box-shadow: inset 0px 0px 0px 1px green;
  display: none;
}
.item.active {
  display: block;
}
.load-more {
  cursor: pointer;
  float: left;
  width: 100%;
  user-select: none;
  -webkit-user-select: none;
  background-color: green;
  color: white;
  text-align: center;
}
    </style>
    <script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
    </head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<main>
  <div class="item active">
    First div
  </div>
  <div class="item active">
    hidden, opened after click
  </div>
  <div class="item active">
    hidden, opened after click
  </div>
  <div class="item">
    hidden, opened after click
  </div>
  <div class="item">
    hidden, opened after click
  </div>
  <div class="item">
    hidden, opened after click
  </div>
  <div class="item">
    hidden, opened after click
  </div>
  <div class="load-more">
    <p>Load More</p>
  </div>
    <script type="text/javascript">
        var $group = $('.item');
$(".load-more").click(function() {
  var $hidden = $group.filter(':hidden:first');
  $hidden.addClass('active');
  $hidden.next().addClass('active');
  $hidden.next().next().addClass('active');
  // remove Load More Div - if no more divs
  if (!$hidden.next('.item').length) {
    $(this).remove();
  }
});
    </script>
</body>
</html>

解决方案1

解决方案2

相关内容

最新更新

热门标签：