如何使用JQuery在子对象上切换类

我有以下标记

<div class="question">
    <h2>Title 1</h2>
    <div class="answer">content 1</div>
</div>

<div class="question">
    <h2>Title 2</h2>
    <div class="answer">content 2</div>
</div>

<div class="question">
    <h2>Title 3</h2>
    <div class="answer">content 3</div>
</div>

标题1
内容1
标题2
内容2
标题3
内容3

我想在单击问题div时切换类“活动”。我尝试了以下代码：

<script type="text/javascript" >
$(document).ready(function(){
    $(".question").click(function () {
        $(this).toggleClass("active");  
        $(this).find("h2").toggleClass("active");   
        $(this).find("answer").toggleClass("active");   
    });
});
</script>

$（文档）.ready（函数（）{
$（“.question”）。单击（函数（）{
$（此）.toggleClass（“活动”）；
$（this.find（“h2”）.toggleClass（“active”）；
$（this.find（“answer”）.toggleClass（“active”）；
});
});

但不幸的是，这会将类活动添加到每个问题（h2和答案），而不仅仅是单击的问题。我似乎不能理解正确的语法

谁能给我指出正确的方向吗

干杯，

---

Shadi

尝试此操作，它会将单击的对象设置为活动：

<script type="text/javascript" >
$(document).ready(function(){
    $(".question").click(function () {
        $(".active").removeClass("active");
        $(this).addClass("active");
        $(this).find("h2, div.answer").addClass("active");
    });
});
</script>

$（文档）.ready（函数（）{
$（“.question”）。单击（函数（）{
$（.active”）.removeClass（“active”）；
$（此）.addClass（“活动”）；
$（this）.find（“h2，div.answer”）.addClass（“active”）；
});
});

如果一个问题连续单击两次，它将保持活动状态，而不是关闭。或者，如果您确实希望在一行中进行第二次单击，请使其处于非活动状态：

<script type="text/javascript" >
$(document).ready(function(){
    $(".question").click(function () {
        var isAlreadyActive = $(this).hasClass("active");
        $(".active").removeClass("active");
        if (!isAlreadyActive) {
            $(this).addClass("active");
            $(this).find("h2, div.answer").addClass("active");
        }
    });
});
</script>

$（文档）.ready（函数（）{
$（“.question”）。单击（函数（）{
var isAlreadyActive=$（this）.hasClass（“活动”）；
$（.active”）.removeClass（“active”）；
如果（！isAlreadyActive）{
$（此）.addClass（“活动”）；
$（this）.find（“h2，div.answer”）.addClass（“active”）；
}
});
});

尝试此操作，它会将单击的对象设置为活动：

<script type="text/javascript" >
$(document).ready(function(){
    $(".question").click(function () {
        $(".active").removeClass("active");
        $(this).addClass("active");
        $(this).find("h2, div.answer").addClass("active");
    });
});
</script>

$（文档）.ready（函数（）{
$（“.question”）。单击（函数（）{
$（.active”）.removeClass（“active”）；
$（此）.addClass（“活动”）；
$（this）.find（“h2，div.answer”）.addClass（“active”）；
});
});

如果一个问题连续单击两次，它将保持活动状态，而不是关闭。或者，如果您确实希望在一行中进行第二次单击，请使其处于非活动状态：

<script type="text/javascript" >
$(document).ready(function(){
    $(".question").click(function () {
        var isAlreadyActive = $(this).hasClass("active");
        $(".active").removeClass("active");
        if (!isAlreadyActive) {
            $(this).addClass("active");
            $(this).find("h2, div.answer").addClass("active");
        }
    });
});
</script>

$（文档）.ready（函数（）{
$（“.question”）。单击（函数（）{
var isAlreadyActive=$（this）.hasClass（“活动”）；
$（.active”）.removeClass（“active”）；
如果（！isAlreadyActive）{
$（此）.addClass（“活动”）；
$（this）.find（“h2，div.answer”）.addClass（“active”）；
}
});
});

您是否有另一个（随附的）

div

类

问题

？如果单击第一个问题，是否要关闭第二个问题的类

活动

？还是把每个问题独立地交换？@K Prime:我不知道你的意思，如果你是说我周围还有什么问题，那么没有。@K Prime:事实上你是对的，我的分数并不像我想象的那样，我有一个问号，其他的都在里面，我现在已经修复了它，代码如上所述：）对不起，我的回答太早了！您是否有另一个带有类

问题的
div
？如果单击了第一个问题，是否要关闭第二个问题的类
活动
？还是把每个问题独立地交换？@K Prime:我不知道你的意思，如果你是说我周围还有什么问题，那么没有。@K Prime:事实上你是对的，我的分数并不像我想象的那样，我有一个问号，其他的都在里面，我现在已经修复了它，代码如上所述：）对不起，我的回答太早了！似乎我的代码不起作用，因为正如在注释中突出显示的那样，我的html中实际上有一个错误。但这改进了我的做法，所以我接受了：）干杯。@Parrots，非常感谢，特别是为我提供了一个替代方案，因为它正是我所寻找的。我的代码似乎不起作用，因为正如在评论中强调的，我的html中实际上有一个错误。但这改进了我的做法，所以我接受了：）干杯。@Parrots，非常感谢，特别是为我提供了一个替代方案，因为这正是我想要的。