javascript - 我怎样才能将以前的功能添加到这个JS

Question

在这个 JS 中，我有一些关于 div class="quiz"的问题，好吧

这里的“下一步”按钮工作正常，适用于下一个问题，例如 1- 2 - 3 - 4 - 并再次重新启动到问题 - 1

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

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

我以前的()函数代码是这样的:

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();
  };
}

但是这个函数无法显示上一个问题。我犯了什么错误？

请解决一下 感谢 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>