Javascript 使函数分别影响每个测验ID

我做了一个选择题测验，当一个页面上有一个选择题时，它完全按照我想要的那样工作。问题是我需要在一个页面上显示多个测验，并且一个测验的行为会影响同一页面上出现的任何其他测验的行为

我一直在网上寻找，看看是否有一种方法可以让函数分别处理每个测验ID（就像它们各自有各自的函数一样），但到目前为止，我还没有发现任何东西可以应用于我已经拥有的函数

下面是Javascript

jQuery(document).ready(function(){
    jQuery('.answer').click(function(event){
        jQuery('.active').removeClass('active');
        jQuery(this).addClass('active');   
        event.preventDefault();
    });
});

这是HTML

<div id="Quiz1" class="quiz">
    <div class="question">Is this a really good question?</div>
    <div class="interaction">
        <div class="answer" data-answer="correct">
            <div class="answer-content">
                <span>Answer 1</span>
            </div>
        </div>
        <div class="answer" data-answer="wrong1">
            <div class="answer-content">
                <span>Answer 2</span>
            </div>
        </div>
        <div class="answer" data-answer="wrong2">
            <div class="answer-content">
                <span>Answer 3</span>
            </div>
        </div>
        <div class="response-text correct">Correct</div>
        <div class="response-text wrong1">Wrong 1</div>
        <div class="response-text wrong2">Wrong 2</div>
    </div>
</div>

<div id="Quiz2" class="quiz">
    <div class="question">Is this a really good question?</div>
    <div class="interaction">
        <div class="answer" data-answer="correct">
            <div class="answer-content">
                <span>Answer 1</span>
            </div>
        </div>
        <div class="answer" data-answer="wrong1">
            <div class="answer-content">
                <span>Answer 2</span>
            </div>
        </div>
        <div class="answer" data-answer="wrong2">
            <div class="answer-content">
                <span>Answer 3</span>
            </div>
        </div>
        <div class="response-text correct">Correct</div>
        <div class="response-text wrong1">Wrong 1</div>
        <div class="response-text wrong2">Wrong 2</div>
    </div>
</div>

因此，只要在页面上进行一次测验，一切都会按预期进行——点击每个气泡就会给用户一个相应的回答：正确，错误，错误2。当单击每个气泡时，css将采用具有.active类的.answer元素，并根据给定的数据属性显示相应的应答

这是美妙的，直到我有一个以上的页面上的测验

当一个页面上有两个测验，并且你在第二个测验中单击气泡时，它将从上面的测验中删除最后一个答案

我需要每个测验独立进行，而不是一个测验影响其他测验

我希望这是有道理的，我很难解释自己

---

我已经设置了一个小提琴，这样你就可以看到它的动作-

如果我理解你的意思，你只想能够显示多个“响应框”

如果是这样的话，这可能会对您有所帮助：

在小提琴中，更改javascript的第3行：

jQuery（'.active'）.removeClass（'active'）；

到

jQuery（this.parent（）.children（'.active'）.removeClass（'active'）；

这将获取给定测验的单击答案的父元素（即

div.interaction

），并仅删除其子类中的

活动

类

编辑 您也可以只使用

sides（）

方法。那会更漂亮。我真的不知道为什么我忘了那个

jQuery（this）.siplines（'.active'）.removeClass（'active'）；

再次感谢，我使用了您的编辑。试着养成尽可能保持清洁的习惯：）很高兴能帮上忙！如果您只希望反馈是可视化的，那么可以稍微简化html/css的结构，如下所示：。它消除了对单独的错误1/2类的需要，并使css选择器更简单。这太棒了！我唯一的问题是，每个响应都需要出现在一行可能的答案下面，这些答案以气泡形式内联出现-我已经将我的CSS的其余部分添加到了这里-啊，我明白了。是的，那就有点棘手了。我个人更喜欢我的结构。使用它，您可以通过使用“虚拟反馈元素”（一个.answer的兄弟元素）并通过jQuery显示正确的反馈来解决问题。像这样，很酷。我想我会使用这把最新的小提琴，并尝试从中学习更多。非常感谢您在@Morsby上的帮助，非常感谢！

.answer[data-answer="correct"] ~ .correct {
    display:none;
}
.answer.active[data-answer="correct"] ~ .correct { 
    display:block
}

.answer[data-answer="wrong1"] ~ .wrong1 {
    display:none;
}
.answer.active[data-answer="wrong1"] ~ .wrong1 { 
    display:block
}

.answer[data-answer="wrong2"] ~ .wrong2 {
    display:none;
}
.answer.active[data-answer="wrong2"] ~ .wrong2 { 
    display:block
}