每次单击时将类添加到单个 DIV。

Question

我正在学习编程。

我有多个具有相同类别和查看更多按钮的兄弟 div 。 我想在单击“查看更多”按钮时，逐个为每个 sibling-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。

- NoobProgrammer

Answer 1

您可以使用以下方式访问组中的下一个隐藏元素：

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

:hidden 选择器用于目标元素没有透明度或display:none的情况。: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>

- Kinglish

---

谢谢，它起作用了！！！当它到达最后一个 div 后，我该如何使它像“查看更少”一样？ - NoobProgrammer

Answer 2

我建议在每个 <div id="div-1" class="sibling-div"> 中添加一个ID，以便无论您在该div中执行什么操作，都可以提高准确性。

- thegreytangent