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

Posted

技术标签:

【中文标题】每次点击将类添加到单个 div【英文标题】:Add class to single div per click 【发布时间】:2021-10-01 01:04:51 【问题描述】:

我是编程新手。

我有多个同级 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

【问题讨论】:

【参考方案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>

【讨论】:

谢谢,成功了!!!一旦它到达最后一个 div,我怎样才能让它看起来更少【参考方案2】:

我建议在每个 &lt;div id="div-1" class="sibling-div"&gt; 中添加一个 id,以确保您在该 div 中所做的任何事情的准确性。

【讨论】:

以上是关于每次点击将类添加到单个 div的主要内容,如果未能解决你的问题,请参考以下文章

Jade 条件(if/else)将类添加到 div 内联

Django Form 将类添加到 div、输入字段和标签

如何将类添加到已经在 jQuery 中调用容器 div 的附加变量

单击使用 v-for 创建的组件时,将类添加到特定的父 div

Dojo dijit.layout.TabContainer - 如何将类添加到选项卡?

将类的内容添加到 id 中?