我怎样才能将以前的 function 添加到这个 JS

Question

在这个 JS 中，我对 div class="quiz" 有一些疑问

这是“下一步”按钮工作正常，即下一个问题，如 1- 2 - 3 - 4 - 并再次重新启动问题 - 1

好的，现在我想制作“上一个”按钮，该按钮应该可以显示上一个问题，例如 Question - 3 to Question - 2 和 Question - 4 to Question - 1

我在上一个按钮上添加了 previous() function 但它也显示下一个问题。

我以前的（） function 代码是这样的：

function previous() {
  anim = anime.timeline()
    .add({
      targets: targets.reverse(),
      scale: [1, 3],
      scaleY: [1, 1.5],
      opacity: [1, 0],
      translateZ: 0,
      easing: "easeOutExpo",
      duration: 100,
      delay: (el, i) => 30 * i
    });

  anim.complete = () => {
    if (question == questions.length - 1) {
      question = 0;
    } // reset question
    else {
      question++;
    }

    prepQuestion();
  };
}

但是这个 function 不能显示之前的问题。 做错了什么？

请让它解决感谢stackoverflow社区。

 var question = 0; var questions = Array.from(document.getElementsByClassName("quiz")).reduce((carry, item) => { carry.push(item.textContent.trim()) return carry; }, []); var anim; var targets; function prepQuestion() { $("#rect").text(questions[question]); var textWrappers = document.querySelectorAll('#rect'); textWrappers.forEach(textWrapper => { textWrapper.innerHTML = textWrapper.textContent.replace(/(\S*)/g, m => { return `<span class="word">` + m.replace(/(-|)?\S(-|@)?/g, "<span class='letter'>$&</span>") + `</span>`; }); }); targets = Array.from(document.querySelectorAll('#rect.letter')); anim = anime.timeline().add({ targets: targets, scale: [3, 1], scaleY: [1.5, 1], opacity: [0, 1], translateZ: 0, easing: "easeOutExpo", duration: 400, delay: (el, i) => 60 * i }); } // init prepQuestion(); function next() { anim = anime.timeline().add({ targets: targets.reverse(), scale: [1, 3], scaleY: [1, 1.5], opacity: [1, 0], translateZ: 0, easing: "easeOutExpo", duration: 100, delay: (el, i) => 30 * i }); anim.complete = () => { if (question == questions.length - 1) { question = 0; } // reset question else { question++; } prepQuestion(); }; } function previous() { anim = anime.timeline().add({ targets: targets.reverse(), scale: [1, 3], scaleY: [1, 1.5], opacity: [1, 0], translateZ: 0, easing: "easeOutExpo", duration: 100, delay: (el, i) => 30 * i }); anim.complete = () => { if (question == questions.length - 1) { question = 0; } // reset question else { question++; } prepQuestion(); }; }

 #rect { font-weight: 900; font-size: 2.5em; font-family: rr; } #rect.letter { display: inline-block; line-height: 1em; } #quizss { display:none; }.word { white-space: nowrap; }

 <script src="/scripts/snippet-javascript-console.min.js?v=1"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="quizss"> <div class="quiz">Question-1: The color of the sky is...?</div> <div class="quiz">Question-2: Paper comes from...?</div> <div class="quiz">Question-3: How many hours in a day?</div> <div class="quiz">Question-4: A Giraffe is a fish?</div> </div> <div id="rect"></div> <br> <Button id="rc" onclick="next()">Next</Button> <Button id="rc" onclick="previous()">previous</Button>

请让它解决感谢stackoverflow社区。

Answer 1

只需反转下一个！

 var question = 0; var questions = Array.from(document.getElementsByClassName("quiz")).reduce((carry, item) => { carry.push(item.textContent.trim()) return carry; }, []); var anim; var targets; function prepQuestion() { $("#rect").text(questions[question]); var textWrappers = document.querySelectorAll('#rect'); textWrappers.forEach(textWrapper => { textWrapper.innerHTML = textWrapper.textContent.replace(/(\S*)/g, m => { return `<span class="word">` + m.replace(/(-|)?\S(-|@)?/g, "<span class='letter'>$&</span>") + `</span>`; }); }); targets = Array.from(document.querySelectorAll('#rect.letter')); anim = anime.timeline().add({ targets: targets, scale: [3, 1], scaleY: [1.5, 1], opacity: [0, 1], translateZ: 0, easing: "easeOutExpo", duration: 400, delay: (el, i) => 60 * i }); } // init prepQuestion(); function next() { anim = anime.timeline().add({ targets: targets.reverse(), scale: [1, 3], scaleY: [1, 1.5], opacity: [1, 0], translateZ: 0, easing: "easeOutExpo", duration: 100, delay: (el, i) => 30 * i }); anim.complete = () => { if (question == questions.length - 1) { question = 0; } // reset question else { question++; } prepQuestion(); }; } function previous() { anim = anime.timeline().add({ targets: targets.reverse(), scale: [1, 3], scaleY: [1, 1.5], opacity: [1, 0], translateZ: 0, easing: "easeOutExpo", duration: 100, delay: (el, i) => 30 * i }); anim.complete = () => { if (question == 0) { question = questions.length - 1; } // reset question else { question--; } prepQuestion(); }; }

 #rect { font-weight: 900; font-size: 2.5em; font-family: rr; } #rect.letter { display: inline-block; line-height: 1em; } #quizss { display:none; }.word { white-space: nowrap; }

 <script src="/scripts/snippet-javascript-console.min.js?v=1"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="quizss"> <div class="quiz">Question-1: The color of the sky is...?</div> <div class="quiz">Question-2: Paper comes from...?</div> <div class="quiz">Question-3: How many hours in a day?</div> <div class="quiz">Question-4: A Giraffe is a fish?</div> </div> <div id="rect"></div> <br> <Button id="rc" onclick="next()">Next</Button> <Button id="rc" onclick="previous()">previous</Button>

Answer 2

在方法'previous'中，替换

if (question == 0) {
   // reset question
   question = questions.length - 1;
} 
else {
   question--;
}

经过

if (question == questions.length - 1) {
      question = 0;
    } // reset question
    else {
      question++;
}