gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 17:16:58 25 4
gpt4 key购买 nike

我是编程新手。

我有多个具有相同类和查看更多按钮的同级 div。我想在 View 更多按钮单击时向 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

最佳答案

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

$(".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>

关于javascript - 每次点击将类添加到单个 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68507036/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com