重复jQuery函数

看我的 JS:

//将测验结果选项放在单独的对象中，以提高灵活性
变量结果选项=[
{标题：'你就是这个东西'，
描述：“你是IG女王
”，
{标题：'你就是那个东西'，
描述：“你是IG女王
”，
{标题：'你是另一个东西'，
描述：“你是IG女王
”，
{标题：'你就是这一件事'，
描述：“你是IG女王
”，
{title:'你是一种类型的东西'，
描述：“你是搞笑女王
”
];
//全局变量
var quizSteps=$（“#quizWrap.quizstep”），
总分=0；
//对于测验中的每个步骤，将所选答案值添加到总分中
//如果已选择答案，则减去以前的值，并用新选择的答案值更新总分
//切换视觉活动状态以显示已选择的选项
quizSteps.each（函数（）{
var currentStep=$（此），
ansOpts=currentStep.children（'.quick-answer'）；
//对于每个步骤的每个选项，添加一个单击侦听器
//应用活动课程并计算总分
ansOpts.each（函数（）{
var eachOpt=$（此值）；
eachOpt[0]。addEventListener（'click'，check，false）；
函数检查（）{
变量$this=$（this），
value=$this.attr（'data-quizIndex'），
answerScore=parseInt（值）；
//检查以前是否选择了答案
如果（currentStep.children（'.active'）。长度>0）{
var wasActive=currentStep.children（'.active'），
oldScoreValue=wasActive.attr（'data-quizIndex'），
oldScore=parseInt（oldScoreValue）；
//处理视觉活动状态
currentStep.children（'.active'）.removeClass（'active'）；
$this.addClass（'active'）；
//处理分数计算
totalScore-=oldScoreValue；
总分+=回答分数；
计算结果（总分）；
}否则{
//处理视觉活动状态
$this.addClass（'active'）；
//处理分数计算
总分+=回答分数；
计算结果（总分）；
//处理当前步骤
updateStep（当前步骤）；
}
}
});
});
//显示当前步骤/隐藏其他步骤
函数updateStep（当前步骤）{
if（currentStep.hasClass（'current'））{
currentStep.removeClass（“当前”）；
currentStep.next（）.addClass（'current'）；
}
}
//显示评分结果
函数calcResults（总分）{
//仅在所有问题都已回答的情况下更新结果div
if（quizSteps.find（'.active'）.length==quizSteps.length）{
var resultstTitle=$（“#results h1”），
resultsDesc=$（'#results.desc'）；
//最低可能分数
var lowestScoreArray=$（'#quizWrap.low value'）.map（函数（）{
返回$（this.attr（'data-quizIndex'）；
});
var-minScore=0；
对于（变量i=0；i

你梦想的节日礼物是什么？


那东西



那东西





什么样的女性形象最能表达你的内在本质



第一件事


第二件事





你的假日美是什么



一件事


另一件事




你对浪漫之旅有什么想法



事情1


第二件事





测验结果




再做一次！

我正在尝试当用户完成测验时，一旦你点击“再做一次”，它会重置当前步骤并从一开始返回。你知道怎么做吗

---

您可以在脚本末尾看到我的线索。

首先，我强烈建议您清理代码，这里很难理解逻辑

然而，如果你想让一切保持“原样”（如果我正确回答了你的问题：-），这里有一个有效的解决方案：

要点：

“创建测验”变成函数，这样你就可以调用i

    // Quiz result options in a separate object for flexibility
var resultOptions = [
    {   title: 'You Are This Thing',
        desc: '<p>You are IG QUEEN</p><img src="https://static.pexels.com/photos/47401/pexels-photo-47401.jpeg"/>'},
    {   title: 'You Are That Thing',
        desc: '<p>You are IG QUEEN</p><img src="https://static.pexels.com/photos/47401/pexels-photo-47401.jpeg"/>'},
    {   title: 'You Are This Other Thing',
        desc: '<p>You are IG QUEEN</p><img src="https://static.pexels.com/photos/47401/pexels-photo-47401.jpeg"/>'},
    {   title: 'You Are This One Thing',
        desc: '<p>You are IG QUEEN</p><img src="https://static.pexels.com/photos/47401/pexels-photo-47401.jpeg"/>'},
    {   title: 'You Are A Type Of Thing',
        desc: '<p>You are IG QUEEN</p><img src="https://static.pexels.com/photos/47401/pexels-photo-47401.jpeg"/>'}
];

// global variables
var quizSteps = $('#quizWrap .quiz-step'),
    totalScore = 0;

// for each step in the quiz, add the selected answer value to the total score
// if an answer has already been selected, subtract the previous value and update total score with the new selected answer value
// toggle a visual active state to show which option has been selected
quizSteps.each(function () {
    var currentStep = $(this),
        ansOpts = currentStep.children('.quiz-answer');
    // for each option per step, add a click listener
    // apply active class and calculate the total score
    ansOpts.each(function () {
        var eachOpt = $(this);
        eachOpt[0].addEventListener('click', check, false);
        function check() {
            var $this = $(this),
                value = $this.attr('data-quizIndex'),
                answerScore = parseInt(value);
            // check to see if an answer was previously selected
            if (currentStep.children('.active').length > 0) {
                var wasActive = currentStep.children('.active'),
                    oldScoreValue = wasActive.attr('data-quizIndex'),
                    oldScore = parseInt(oldScoreValue);
                // handle visual active state
                currentStep.children('.active').removeClass('active');
                $this.addClass('active');
                // handle the score calculation
                totalScore -= oldScoreValue;
                totalScore += answerScore;
                calcResults(totalScore);
            } else {
                // handle visual active state
                $this.addClass('active');
                // handle score calculation
                totalScore += answerScore;
                calcResults(totalScore);
                // handle current step
                updateStep(currentStep);
            }
        }
    });
});

// show current step/hide other steps
function updateStep(currentStep) {
    if(currentStep.hasClass('current')){
       currentStep.removeClass('current');
       currentStep.next().addClass('current');
    }
}

// display scoring results
function calcResults(totalScore) {
    // only update the results div if all questions have been answered
    if (quizSteps.find('.active').length == quizSteps.length){
        var resultsTitle = $('#results h1'),
            resultsDesc = $('#results .desc');

        // calc lowest possible score
        var lowestScoreArray = $('#quizWrap .low-value').map(function() {
            return $(this).attr('data-quizIndex');
        });
        var minScore = 0;
        for (var i = 0; i < lowestScoreArray.length; i++) {
            minScore += lowestScoreArray[i] << 0;
        }
        // calculate highest possible score
        var highestScoreArray = $('#quizWrap .high-value').map(function() {
            return $(this).attr('data-quizIndex');
        });
        var maxScore = 0;
        for (var i = 0; i < highestScoreArray.length; i++) {
            maxScore += highestScoreArray[i] << 0;
        }
        // calc range, number of possible results, and intervals between results
        var range = maxScore - minScore,
            numResults = resultOptions.length,
            interval = range / (numResults - 1),
            increment = '',
            n = 0; //increment index
        // incrementally increase the possible score, starting at the minScore, until totalScore falls into range. then match that increment index (number of times it took to get totalScore into range) and return the corresponding index results from resultOptions object
        while (n < numResults) {
            increment = minScore + (interval * n);
            if (totalScore <= increment) {
                // populate results
                resultsTitle.replaceWith("<h1>" + resultOptions[n].title + "</h1>");
                resultsDesc.replaceWith("<p class='desc'>" + resultOptions[n].desc + "</p>");
                return;
            } else {
                n++;
            }
        }
    }
}
// // show current step/hide other steps
// function updateStep(currentStep) {
//     if(currentStep.hasClass('current')){
//        currentStep.removeClass('current');
//        currentStep.next().addClass('current');
//     }
// }



function startAgain(currentStep){
      if(currentStep.hasClass('current')){
       currentStep.removeClass('current');
       currentStep.next().addClass('current');
    }
}

var button = document.getElementById('buttonDoItAgain');
$('#buttonDoItAgain').click(function(){
    // document.getElementById('buttonDoItAgain').style.display = "none";

    // if all answers have been answered start again or go back to step1
    if (quizSteps.find('.active').length == quizSteps.length){
                // handle visual active state
                // handle score calculation
                totalScore = 0;
                // calcResults(totalScore); 
                // handle current step
                var currentStep = $(this);
                startAgain();
    }

});

<div id="quizWrap">
<!--   <h1>QUIZZES </h1> -->
    <ul class="quiz-step step1 current">
        <li class="question">
            <div class="question-wrap">
                <h2>What's Your Dream Holiday Gift?</h2>
            </div>
        </li>
        <li class="quiz-answer high-value" data-quizIndex="2">
            <div class="answer-wrap"> 
                <p class="answer-text">That Thing
                 <img src="http://www.polyvore.com/cgi/img-thing?.out=jpg&size=l&tid=170491869" />
              </p>
            </div>
        </li>
        <li class="quiz-answer high-value" data-quizIndex="4">
            <div class="answer-wrap"> 
                <p class="answer-text">That Thing
                 <img src="http://www.polyvore.com/cgi/img-thing?.out=jpg&size=l&tid=170491869" />
              </p>
            </div>
        </li>
    </ul>
    <ul class="quiz-step step2">
        <li class="question">
            <div class="question-wrap">
                <p>What Female Figure Best Speaks To Your Inner Essence?</p>
            </div>
        </li>
        <li class="quiz-answer low-value" data-quizIndex="2">
            <div class="answer-wrap"> 
                <p class="answer-text">First Thing</p>
            </div>
        </li>
        <li class="quiz-answer high-value" data-quizIndex="4">
            <div class="answer-wrap">
                <p class="answer-text">Second Thing</p>
            </div>
        </li>
    </ul>
    <ul class="quiz-step step3">
        <li class="question">
            <div class="question-wrap">
                <p>What’s Your Holiday Beauty Essential</p>
            </div>
        </li>
        <li class="quiz-answer low-value" data-quizIndex="2">
            <div class="answer-wrap">
                <p class="answer-text">One Thing</p>
            </div>
        </li>
        <li class="quiz-answer high-value" data-quizIndex="4">
            <div class="answer-wrap">
                <p class="answer-text">Another Thing</p>
            </div>
        </li>
    </ul>
    <ul class="quiz-step step4">
        <li class="question">
            <div class="question-wrap">
                <p>What’s Your Idea of a Romantic Excursion?</p>
            </div>
        </li>
        <li class="quiz-answer low-value" data-quizIndex="2">
            <div class="answer-wrap">
                <p class="answer-text">Thing 1</p>
            </div>
        </li>
        <li class="quiz-answer high-value" data-quizIndex="4">
            <div class="answer-wrap">
                <p class="answer-text">Thing 2</p>
            </div>
        </li>
    </ul>
    <ul id="results">
        <li class="results-inner">
            <p>QUIZZES RESULTS</p>
            <h1></h1>
            <p class="desc"></p>
        </li>
    </ul>
    <div id="buttonDoItAgain">
      <button>Do it again!</button>
    </div>
</div>

 var createQuiz = function() {
   quizSteps.each(function() {
   // your code
  }
}

createQuiz();

$('#buttonDoItAgain').click(function() {
   totalScore = 0;
   $('#results').removeClass('current');

   $('.quiz-step').each(function() {
     $(this).removeClass('current');
     $(this).removeClass('active');
     $(this).children().each(function() {
       $(this).removeClass('active');
     });
   });

   $('.quiz-step.step1').addClass('current');
   $('.results-inner').html('');

   createQuiz();
 });