时间戳

首页 > 解决方案 > 每次点击将类添加到单个 div

javascript - 每次点击将类添加到单个 div

问题描述

我是编程新手。

我有多个同级 div 和一个查看更多按钮。我想在查看更多按钮单击时将类添加到 div，但要一一添加。所以第一个sibling-div将可见并查看更多按钮。当用户单击按钮时，第二个sibling-div应该可见，然后再次单击第三个sibling-div应该可见，依此类推。

我无权访问 html，所以我使用 jQuery 添加查看更多按钮。

默认情况下，我使用 CSS 隐藏所有同级 div。只有第一个 div、view-more-btn按钮和当有活动类时它们才会可见。

我尝试使用 jQuery 添加类，但它添加到所有 div 中。

这是html

<div class="parent-div">
  <div class="sibling-div">
    /*content*/
  </div>
  <div class="sibling-div">
    /*content*/
  </div>
  <div class="sibling-div">
    /*content*/
  </div>
  <div class="sibling-div">
    /*content*/
  </div>
  <div class="sibling-div view-more">
    <a class="view-more-btn">View More</a>
  </div>
</div>

这是我的 CSS

.parent-div .sibling-div{
  display: none;
}
.parent-div .sibling-div:first-child, .parent-div .sibling-div.active, .parent-div .sibling-div.view-more{
  display: block;
}

这是我的 jQuery

$(document).ready(function(){
  var view_more = '<div class="sibling-div view-more"><a class="view-more-btn">View more</a></div>';
  $(".parent-div .sibling-div:last-child").after(view_more);
  $(".parent-div .view-more-btn").click(function(){
    /*Adds class to all sibling divs*/
    $(".parent-div .sibling-div").addClass("active");
    /*Also tried*/
    $(".parent-div .sibling-div:first-child").next().addClass("active");
    /*But it only adds class to the second sibling*/
    /*Also tried using loop*/
    var div_length = $(".parent-div .sibling-div").length();
    for(i=0; i <= div_length; i++){
      $(".parent-div .sibling-div").addClass("active");
    }
  });
});

我已经尝试了所有这些方法，但它没有按照我想要的方式工作。它将类添加到所有的sibling-div，或者只是第二个sibling-div

标签： javascriptphphtmljquerycss

解决方案

您可以访问组中的下一个隐藏元素

$(".parent-div .sibling-div:hidden:first")

:hidden目标元素没有不透明度或显示：无。 :first是一个 jQuery 选择器，以匹配的第一项为目标。

$(document).ready(function() {
  $('.parent-div').append('<div class="" view-more"><a class="view-more-btn" href="#">View more</a></div>');
  $(".parent-div .view-more-btn").click(function() {
    $(".parent-div .sibling-div:hidden:first").addClass("active");
  });
});
.parent-div .sibling-div {
  display: none;
}

.parent-div .sibling-div:first-child,
.parent-div .sibling-div.active,
.parent-div .sibling-div.view-more {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent-div">
  <div class="sibling-div">
    /*content*/
  </div>
  <div class="sibling-div">
    /*content*/
  </div>
  <div class="sibling-div">
    /*content*/
  </div>
  <div class="sibling-div">
    /*content*/
  </div>

</div>

推荐阅读