每次点击将类添加到单个 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】:我建议在每个 <div id="div-1" class="sibling-div">
中添加一个 id,以确保您在该 div 中所做的任何事情的准确性。
【讨论】:
以上是关于每次点击将类添加到单个 div的主要内容,如果未能解决你的问题,请参考以下文章
如何将类添加到已经在 jQuery 中调用容器 div 的附加变量
单击使用 v-for 创建的组件时,将类添加到特定的父 div