javascript - 定位测验中的按钮组，而不是点击时的所有测验问题

Question

更新#1

<小时/>

• 我已更新 index.html 和 scripts.js

剩余问题

如果我点击错误的答案......

• 它不会为刚刚单击的按钮提供类
• 它为正确答案提供了 is-false 类和 quiz__info

如果我点击正确答案...

• 它不会为错误答案赋予 is-false 类

scripts.js(新)

var score = 0;

$(document).on("click", ".quiz__response", function(){
    $(this).siblings().addBack().addClass("is--unclickable");
    $(this).siblings().show("quiz__info");  // Show extra info
    console.log("Clicked");

    if ($(this).hasClass("answer--true")) {
        $(this).addClass("is--true");
        $(this).find("i").show();
        $(this).siblings().find("i").show();

        // Update score
        score++
        $(".quiz__correct").html(score);
        $(".quiz__correct--mobile").html(score);
    } else {
        // $(this).addClass("is--false");
        $(this).siblings().addClass("is--false");
        $(this).find("i").show();
        $(this).siblings().find("i").show();
    }
});

index.html(每个问题几乎都有这样的结构)

        <div class="quiz__question question-5 question__sports">
            <h3>Question #5</h3>
            <p class="quiz__description">A former PGA Tour winner from Brandon passed away at the age of 63. Can you name him?</p>
            <div class="quiz__responses">
                <button class="quiz__response response-5 answer--false">Billy Casper <i class="fa fa-times"></i></button>
                <button class="quiz__response response-5 answer--false">Rory Woods <i class="fa fa-times"></i></button>
                <button class="quiz__response response-5 answer--true">Dan Halldorson <i class="fa fa-check"></i></button>
                <button class="quiz__response response-5 answer--false">Billy Hurley <i class="fa fa-times"></i></button>

                <div class="quiz__info">
                    <p><span class="answer">A: </span>Halldorson competed for nearly 30 years on the PGA Tour, winning the 1980 Pensacola Open. He also captured the 1986 Deposit Guaranty Golf Classic, which was an unofficial tour stop. All told, he had 28 top 10 finishes in 431 PGA Tour events, pocketing nearly $1.2 million in career earnings.</p>
                </div>
            </div> <!-- .responses -->
        </div> <!-- .question -->

原始问题

<小时/>

目标

我有一个包含 25 个问题的测验，每个问题有 4 个可能的答案 .quiz__response。单击按钮时，我希望执行以下操作，但仅针对与该特定问题相关的答案，现在它将以下内容应用于所有问题。

单击按钮时...

• addClass(".is--unclickable") 这四个答案
• .show() .fa-check 如果答案为 true，.fa-times 如果答案为 false
如果答案正确，
• addClass(".is--true") 将背景更改为绿色，addClass(".is--false") 进行更改其余三个答案的背景为红色

JSFiddle:https://jsfiddle.net/ub0c6acv/

脚本.js

$(function(){

    /*-------------------------------------
    QUIZ
    --------------------------------------*/

    function showScoreBox() {
        var scrollDepth = $(window).scrollTop();
        var divPosition = $(".quiz__header").offset().top - 45;
        var windowWidth = $(window).width();
        // console.log(windowWidth);

        if (scrollDepth > divPosition && (windowWidth > 768)) {
            $(".quiz__score").show();
            $(".quiz__score--mobile").hide();
        } else {
            $(".quiz__score").hide();
            $(".quiz__score--mobile").show();
        }
    } showScoreBox();

    $(window).on("scroll", function(){
        showScoreBox();
    });

    $(window).on("resize", function(){
        showScoreBox();
    });

    var score = 0;

    $(".quiz__response").on("click", function(){
        $(".quiz__response").addClass("is--unclickable");
        $(".quiz__info").show("quiz__info");  // Show extra info
        console.log("Clicked");

        if ($(this).hasClass("answer--true")) {
            $(this).addClass("is--true");
            $(".fa-check").show();

            // Update score
            score++
            $(".quiz__correct").html(score);
            $(".quiz__correct--mobile").html(score);
        } else {
            $(this).addClass("is--false");
            $(".fa-times").show();
        }
    });

    /*-------------------------------------
    RESET
    --------------------------------------*/

    function resetQuiz() {
      $(".quiz__response").removeClass("answer--true answer--false");
      var score = 0
      $(".quiz__correct").html(score);
      $(".quiz__correct--mobile").html(score);
    }

    $(".button__reset").on("click", function(){
     resetQuiz();
    });

    /*-------------------------------------
    CONFETTI
    --------------------------------------*/

    function rainConfetti() {

        if (score === 25) {
            canvas.show()
        }
    }

    /*-------------------------------------
    SMOOTH SCROLL
    --------------------------------------*/

    $('a[href*=#]:not([href=#])').click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
            if (target.length) {
                $('html,body').animate({
                    scrollTop: target.offset().top
                }, 1000);
                return false;
            }
        }
    });
});

index.html(测验片段)

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

  <div class="quiz">
            <div class="quiz__score">
                <p><span class="quiz__correct">0</span> / 25</p>
            </div>

            <h2 class="quiz__header" id="top">Take the quiz</h2>
            <p class="credit">How well have you been paying attention to what's been happening in southwestern Manitoba in 2015? Take our 25-question quiz to test your local news knowledge.</p>

            <div class="quiz__questions">
            <!-- <canvas id="confetti"></canvas> -->
                <!-- Question -->
                <div class="quiz__question question-1 question__sports">
                    <div class="wrapper">
                        <!-- <img src="http://placehold.it/500x300" alt="" class="quiz__image"> -->
                    </div>
                    <h3>Question #1</h3>
                    <p class="quiz__description">What Brandon Wheat King, who was drafted by the New York Islanders, lost his desire to play hockey and walked away from the team prior to this season starting?</p>
                    <div class="quiz__responses">
                        <button class="quiz__response answer--false">Kale Clague <i class="fa fa-times"></i></button>
                        <button class="quiz__response answer--false">Macoy Erkamps <i class="fa fa-times"></i></button>
                        <button class="quiz__response answer--true">Ryan Pilon <i class="fa fa-check"></i></button>
                        <button class="quiz__response answer--false">Colin Cloutier <i class="fa fa-times"></i></button>


                        <!-- The six­-foot-­two, 212­pound rearguard had 11 goals and 41 assists in 68 regular­ season games, with a goal and 11 assists in 19 playoff contests last season, paired mainly with Russian Ivan Provorov. In 193 regular­season games with Brandon and the Lethbridge,Hurricanes, Pilon has 23 goals, 93 assists and 116 penalty minutes. -->

                    </div> <!-- .responses -->
                </div> <!-- .question -->

                <!-- Question -->
                <div class="quiz__question question-2 question__sports">
                    <div class="wrapper">
                        <!-- <img src="http://placehold.it/500x300" alt="" class="quiz__image"> -->
                    </div>
                    <h3>Question #2</h3>
                    <p class="quiz__description">Which former Brandon skip refused to talk to the local media after losing his fifth provincial men’s curling championship game in six years at Westman Place?</p>
                    <div class="quiz__responses">
                        <button class="quiz__response answer--false">Russ Howard <i class="fa fa-times"></i></button>
                        <button class="quiz__response answer--false">Kerry Burtnyk <i class="fa fa-times"></i></button>
                        <button class="quiz__response answer--true">Mike McEwen <i class="fa fa-check"></i></button>
                        <button class="quiz__response answer--false">Braden Calvert <i class="fa fa-times"></i></button>
                    </div> <!-- .responses -->
                </div> <!-- .question -->

                <!-- McEwen’s Winnipeg based team of B.J. Neufeld, Matt Wozniak and Denni Neufeld lost to Ried Carruthers 5­3 at the Safeway Championship hosted by Brandon. -->
        </div> <!-- quiz -->

Answer 1

首先，您可以使用 event delegation [直接事件和委托(delegate)事件部分] 绑定(bind)单个事件处理程序，而不是为每个按钮绑定(bind)一个事件处理程序。

$(".quiz__response").on("click", function(){
$(document).on("click", ".quiz__response", function(){

要仅在与特定问题相关的答案上添加 .is--unclickable，请更改$(".quiz__response").addClass("is--unclickable");
到
$(this).siblings().addBack().addClass("is--unclickable");
或
$(this).parent().children().addClass("is--unclickable");

要显示 fa-times 或 fa-check，请更改
$(".fa-check").show();
$(".fa-times").show();
到$(this).find("i").show();(同时在 if 和 else 语句中)

并在 if 语句中添加 $(this).siblings().addClass("is--false");，将剩余的答案涂成红色，如果检查正确的。

编辑

完整的 js 更改

  $(document).on("click", ".quiz__response", function() {
    $(this).siblings("button").addBack().addClass("is--unclickable");
    $(this).siblings(".quiz__info").show(); // Show extra info
    console.log("Clicked");

    if ($(this).hasClass("answer--true")) {
      $(this).addClass("is--true");
      $(this).siblings("button").addBack().find("i").show();
      $(this).siblings("button").addClass("is--false");

      // Update score
      score++
      $(".quiz__correct").html(score);
      $(".quiz__correct--mobile").html(score);
    } else {
      $(this).addClass("is--false");
      $(this).find("i").show();
    }
  });