如何防止显示非活动div

Question

我有一些测验，就像我在下面展示的那样。每个测验以submit和reset按钮结束。这里的问题是，如果我在测验中点击submit按钮，它也会显示另一个测验答案。

是否有人可以帮助我阻止显示除活动测验div之外的答案

<div id="quiz-1" class="quiz">

 - Qn 1  Qn 2  Qn 3

**Submit  Reset**
</div>

<div id="quiz-2" class="quiz">

 - Qn 1  Qn 2  Qn 3

**Submit  Reset**
</div>

<div id="quiz-3" class="quiz">

 - Qn 1  Qn 2  Qn 3

**Submit  Reset**
</div>

<!--- HTML CODE --->
<div id="quiz-1" class="quiz">
    <div id="q1">
        <div class="qn">
            <p>question</p>
        </div>
        <div class="ans">
            <ul style="list-style-type: none;">
                <li class="correct"><input type="radio" name="q1" value="a" id="q1a"/><label for="q1a">option 1</label></li>
                <li><input type="radio" name="q1" value="b" id="q1b"/><label for="q1b">option 2</label></li>
                <li><input type="radio" name="q1" value="c" id="q1c"/><label for="q1c">option 3</label></li>
                <li><input type="radio" name="q1" value="d" id="q1d"/><label for="q1d">option 4</label></li>
            </ul>
            <div class="expn" style="display:none">
                <p><b>Some explanation</b></p>
            </div>
        </div>
    </div>

    <div id="q2">
        <div class="qn">
            <p>question</p>
        </div>
        <div class="ans">
            <ul style="list-style-type: none;">
                <li><input type="radio" name="q2" value="a" id="q2a"/><label for="q2a">option 1</label></li>
                <li><input type="radio" name="q2" value="b" id="q2b"/><label for="q2b">option 2</label></li>
                <li class="correct"><input type="radio" name="q2" value="c" id="q2c"/><label for="q2c">option 3</label></li>
                <li><input type="radio" name="q2" value="d" id="q2d"/><label for="q2d">option 4</label></li>
            </ul>
            <div class="expn" style="display:none">
                <p><b>Some explanation</b></p>
            </div>
        </div>
    </div>
    <button class="btn1" type="submit">Show Answer</button>
    <button class="btn2" type="reset">Reset</button>
    <span style="display:none; color: red" class="ans_all">  Please answer all questions</span>
</div><!-- quiz-1 -->

<div id="quiz-2" class="quiz">
    <div id="q1">
        <div class="qn">
            <p>question</p>
        </div>
        <div class="ans">
            <ul style="list-style-type: none;">
                <li class="correct"><input type="radio" name="q1" value="a" id="q1a"/><label for="l12q1a">option 1</label></li>
                <li><input type="radio" name="q1" value="b" id="q1b"/><label for="l12q1b">option 2</label></li>
                <li><input type="radio" name="q1" value="c" id="q1c"/><label for="l12q1c">option 3</label></li>
                <li><input type="radio" name="q1" value="d" id="q1d"/><label for="l12q1d">option 4</label></li>
            </ul>
            <div class="expn" style="display:none">
                <p><b>Some explanation</b></p>
            </div>
        </div>
    </div>

    <div id="q2">
        <div class="qn">
            <p>question</p>
        </div>
        <div class="ans">
            <ul style="list-style-type: none;">
                <li><input type="radio" name="q2" value="a" id="q2a"/><label for="q2a">option 1</label></li>
                <li><input type="radio" name="q2" value="b" id="q2b"/><label for="q2b">option 2</label></li>
                <li class="correct"><input type="radio" name="q2" value="c" id="q2c"/><label for="q2c">option 3</label></li>
                <li><input type="radio" name="q2" value="d" id="q2d"/><label for="q2d">option 4</label></li>
            </ul>
            <div class="expn" style="display:none">
                <p><b>Some explanation</b></p>
            </div>
        </div>
    </div>
    <button class="btn1" type="submit">Show Answer</button>
    <button class="btn2" type="reset">Reset</button>
    <span style="display:none; color: red" class="ans_all">  Please answer all questions</span>
</div><!-- quiz-2 -->

<div id="quiz-3" class="quiz">
    <div id="q1">
        <div class="qn">
            <p>question</p>
        </div>
        <div class="ans">
            <ul style="list-style-type: none;">
                <li class="correct"><input type="radio" name="q1" value="a" id="q1a"/><label for="l12q1a">option 1</label></li>
                <li><input type="radio" name="q1" value="b" id="q1b"/><label for="l12q1b">option 2</label></li>
                <li><input type="radio" name="q1" value="c" id="q1c"/><label for="l12q1c">option 3</label></li>
                <li><input type="radio" name="q1" value="d" id="q1d"/><label for="l12q1d">option 4</label></li>
            </ul>
            <div class="expn" style="display:none">
                <p><b>Some explanation</b></p>
            </div>
        </div>
    </div>

    <div id="q2">
        <div class="qn">
            <p>question</p>
        </div>
        <div class="ans">
            <ul style="list-style-type: none;">
                <li><input type="radio" name="q2" value="a" id="q2a"/><label for="q2a">option 1</label></li>
                <li><input type="radio" name="q2" value="b" id="q2b"/><label for="q2b">option 2</label></li>
                <li class="correct"><input type="radio" name="q2" value="c" id="q2c"/><label for="q2c">option 3</label></li>
                <li><input type="radio" name="q2" value="d" id="q2d"/><label for="q2d">option 4</label></li>
            </ul>
            <div class="expn" style="display:none">
                <p><b>Some explanation</b></p>
            </div>
        </div>
    </div>
    <button class="btn1" type="submit">Show Answer</button>
    <button class="btn2" type="reset">Reset</button>
    <span style="display:none; color: red" class="ans_all">  Please answer all questions</span>
</div><!-- quiz-3 -->

​

$('.btn1').on('click', chkd_answer);
$('.btn2').on('click', reset);

function chkd_answer() {
    var chkd_optn = $('input:checked');
    var correct = $("li.correct");
    var wrong = chkd_optn.parent("li").not(".correct");

    if (chkd_optn.length < 3) {
        $('.ans_all').fadeIn(1000).fadeOut(800);
    } else {
        $('.expn').slideToggle();
        correct.toggleClass('g-class'); // adding green
        wrong.toggleClass('r-class'); // adding red
    }
}

function reset(){
var chkd_optn = $('input:checked');
    chkd_optn.prop("checked", false);
    $('.expn').slideUp();
    $('li').removeClass('g-class r-class');
}

Answer 1

尝试将您的函数替换为以下函数：

function chkd_answer() {
    var currentButton = $(this);
    var chkd_optn = $('input:checked');
    var correct = $("li.correct");
    var wrong = chkd_optn.parent("li").not(".correct");

    if (chkd_optn.length < 3) {
        $('.ans_all').fadeIn(1000).fadeOut(800);
    } else {
        $(currentButton).closest(".quiz").find('.expn').slideToggle(); // searching the associated .expn element to show it
        correct.toggleClass('g-class'); // adding green
        wrong.toggleClass('r-class'); // adding red
    }
}

此外，您的所有代码显示都与相关的选项按钮一起工作，这些按钮就是单击该按钮的位置。因此，请也检查您的其余代码。