时间戳

首页 > 解决方案 > 尝试向测验添加提交按钮

jquery - 尝试向测验添加提交按钮

问题描述

前段时间我从这里采用了这个测验，它运行良好，除了当您单击答案时要求添加提交按钮而不是测验前进。

我尝试通过提交按钮调用 updteStep() 函数（从 check() 函数中删除它之后，它只是没有响应。我尝试通过和 onClick 调用它，并添加一个 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);

                }
            }

        });

我想我只是想知道如何通过单击提交按钮来单击答案来调用当前正在调用的函数。

标签： jquerybuttonsubmit

解决方案

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

用最简单的话来说：

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

function updateStep(currentStep) {

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

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

推荐阅读