如何使用jquery添加类动态

Question

请参阅下面的代码：

$(".btn").on("click", function(){
$(".main-div").toggleClass("active");
});

.main-div.active {
background: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="one">
<div class="btn">ClickMe1</div>
<div class="main-div">Div1</div>
</div>
<div class="one">
<div class="btn">ClickMe2</div>
<div class="main-div">Div2</div>
</div>

嗨，伙计们，你们能帮我处理这件事吗？我的目标是单击第一个按钮，它应该只在第一个.main-div上添加类然而，通过使用toggle，它还添加了第二个div帮助我如何正确地实现它？

Answer 1

$(".btn").on("click", function(){
$(this).next(".main-div").toggleClass("active");
});

.main-div.active {
background: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="one">
<div class="btn">ClickMe1</div>
<div class="main-div">Div1</div>
</div>
<div class="one">
<div class="btn">ClickMe2</div>
<div class="main-div">Div2</div>
</div>

您的问题是$(".main-div").toggleClass("active");选择每个.main-div，而不仅仅是兄弟元素。

选择具有.main-div类的下一个同级的最简单方法是$(this).next(".main-div").toggleClass("active");

有关jQuery选择器的更多信息，请访问https://api.jquery.com/category/selectors/