Question

我前段时间从here开始接受此测验，它运行良好，但是当您单击答案时，要求添加一个“提交”按钮来代替测验前进。

我尝试通过“提交”按钮调用updteStep（）函数（将其从check（）函数中删除后，它只是没有响应。我尝试通过andonClick调用它，并添加一个EventListener。我不确定从这里去哪里。

您可以在jsfiddle上看到没有提交按钮的当前工作示例。

主要的jquery引擎在这里：


        var quizSteps = $('#quizzie .quiz-step'),
            //highScoreVariable = 9,
            categoryOneScore = 0,
            categoryTwoScore = 0,
            categoryThreeScore = 0;
        quizSteps.each(function () {
            var currentStep = $(this),

                ansOpts = currentStep.children('.quiz-answer');


            ansOpts.each(function () {
                var eachOpt = $(this);
                //var eachOpt = document.getElementById('submit');
                eachOpt[0].addEventListener('click', check, false);
                //document.getElementById("submit").addEventListener('click', check, false);

                function check() {
                    var $this = $(this);
                    var cat1Answer = $this.attr('data-quizIndexCat1');
                    if (typeof cat1Answer !== typeof undefined && cat1Answer !== false) {
                        categoryOneScore += parseInt(cat1Answer);
                        //alert('P' + categoryOneScore);
                    }
                    var cat2Answer = $this.attr('data-quizIndexCat2');
                    if (typeof cat2Answer !== typeof undefined && cat2Answer !== false) {
                        categoryTwoScore += parseInt(cat2Answer);
                       // alert('B' + categoryTwoScore);
                    }
                    var cat3Answer = $this.attr('data-quizIndexCat3');
                    if (typeof cat3Answer !== typeof undefined && cat3Answer !== false) {
                        categoryThreeScore += parseInt(cat3Answer);
                       // alert('D' + categoryThreeScore);
                    }
                    $this.addClass('active');
                    $('current').fadeOut(1000).fadeIn(1000);
                    calcResults();
                    updateStep(currentStep);
                }
            });

            function updateStep(currentStep) {
                if (currentStep.hasClass('current')) {
                    //currentStep.removeClass('current').fadeTo("slow");
                    currentStep.slideUp(500, function() {
                    $(this).removeClass('current');
                    });
                    //currentStep.removeClass('current');
                    currentStep.next().slideDown(500, function() {
                    $(this).addClass('current');
                    });
                    //currentStep.next().addClass('current');
                    //alert (quizSteps);
                    window.console.log(quizSteps);
                }
            }
            function calcResults() {
                // only update the results div if all questions have been answered
                if (quizSteps.find('.active').length == quizSteps.length) {
                    window.console.log(" Procrastinator score is =" + categoryOneScore);
                    window.console.log("Busy Bee score is =" + categoryTwoScore);
                    window.console.log("Distracted score is =" + categoryThreeScore);
                    //alert (quizSteps);

                    var msgIndex = 0;
                    if ((categoryOneScore == 3 &&
                            categoryOneScore == categoryThreeScore  &&
                            categoryOneScore == categoryTwoScore) ) {
                        msgIndex = 7;

                    }
                    else if ((categoryOneScore == categoryTwoScore &&
                            categoryTwoScore == categoryThreeScore) ) {
                        msgIndex = 3;

                    } 
                    else if ((categoryOneScore == categoryTwoScore &&
                            categoryTwoScore > categoryThreeScore) ) {
                        msgIndex = 4;
                        //alert ('Case 2');

                    }
                    else if ((categoryOneScore == categoryThreeScore &&
                            categoryThreeScore > categoryTwoScore) ) {
                        msgIndex = 5;

                    }
                    else if ((categoryTwoScore == categoryThreeScore &&
                            categoryThreeScore > categoryOneScore) ) {
                        msgIndex = 6;

                    }
                    else if ((categoryOneScore >= categoryTwoScore &&
                        categoryOneScore >= categoryThreeScore) ) {
                        msgIndex = 0;

                    }
                    else if ((categoryTwoScore >= categoryOneScore &&
                            categoryTwoScore >= categoryThreeScore) ) {
                        msgIndex = 1;

                    }  
                    else if ((categoryThreeScore >= categoryOneScore &&
                            categoryThreeScore >= categoryTwoScore) ) {
                        msgIndex = 2;
                    }  

                    var resultsTitle = $('#results h1'),
                        resultsDesc = $('#results .desc');
                    resultsTitle.replaceWith("<h1>" + resultOptions[msgIndex].title + "</h1>");
                    resultsDesc.replaceWith("<p class='desc'>" + resultOptions[msgIndex].desc + "</p>");
                    window.CP.exitedLoop(6);
                    //document.getElementById("instrct").style.opacity="0";
                    //alert(msgIndex);

                }
            }

        });

我想我只是在寻找一种有关如何通过单击提交按钮而不是答案来调用当前正在调用的函数的想法。

Answer 1

updateStep是ansOpt.each的“私有”，因此您不能通过“提交”按钮来调用它。您需要将该函数移动/公开到可以调用它的位置，然后可以使用当前活动问题来调用它。

最简单的说法：

$("#submit").click(function() {
  updateStep($(".current"))
});

function updateStep(currentStep) {

更新的小提琴： https://jsfiddle.net/sph42onb/1/

我可能还会进行其他一些更改，例如为上述函数命名（现在已经公开），并使用比.current更具体的类名，而可能您的页面。

尝试将提交按钮添加到测验

1 个答案: