Question

我进行了多项选择测验，当一个页面上有一个测验时，它完全可以按照我的意愿进行。问题是我需要在一个页面上显示多个测验，而一个测验的行为正在影响同一页面上出现的任何其他测验的行为

我一直在网上寻找该功能是否有办法分别处理每个测验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>

这是CSS

.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
}

因此，在页面上进行一个测验，一切都会按预期进行-单击每个气泡将为用户提供相应的响应：正确，错误，错误2。在单击每个气泡时，css会选择具有.active类的任何.answer元素，并根据给定的数据属性显示相应的答案响应。

这很棒，直到我在页面上进行多个测验为止

如果一页上有两个测验，而您单击第二个测验中的气泡，则会从其上方的测验中删除最后一个答案。

我需要每个测验独立行动，而没有一个测验会影响其他测验。

我希望这是有道理的，我在解释自己时很糟糕。

我已经设置了一个小提琴，以便您可以在操作中看到它-https://jsfiddle.net/g8qpvtcz/1/

Answer 1

如果我了解您，您只是想显示多个“响应框”？

如果是这样，这可能为您完成工作：

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

jQuery('.active').removeClass('active');

到

jQuery(this).parent().children('.active').removeClass('active');

这将获得给定测验的单击答案的父元素（即div.interaction），并且仅删除其子级的active类。

修改您也可以只使用siblings()方法。哪怕更漂亮。真的不知道为什么我忘记了那个。

jQuery(this).siblings('.active').removeClass('active');

使功能分别影响每个测验ID

1 个答案: