我如何使用 div 类中的这些 JS 数组数据而不是数组

Question

在这个脚本中有三个问题作为 JS 数组，但我想使用 div 类内容而不是 js 数组。这是我的js动画，带有“下一步”按钮，它在下一个数组旁边一一进行动画处理，但我希望这些带有测验类的div必须像该数组一样，一一进行动画处理。

<div class="quiz">The color of the sky is...?</div>

<div class="quiz">Paper comes from...?</div>

<div class="quiz">How many hours in a day?</div> 

例如：这里的js数组结构是这样的：

questions = [

        "The color of the sky is...?",

      "Paper comes from...?",  

      "How many hours in a day?"];

但我想使用这个 div 类内容而不是数组格式

<div class="quiz">The color of the sky is...?</div>

<div class="quiz">Paper comes from...?</div>

<div class="quiz">How many hours in a day?</div>

为此，我尝试了这段代码，但它在这里不起作用

var questions = document.getElementsByClassName("quiz");

for(i = 0; i < pageDivs.length;i++)

{

所以请可爱的 stackoverflow 社区的任何成员都可以帮助我解决这个问题。

预先感谢您的帮助。

Answer 1

使用var questions = Array.from(document.getElementsByClassName("quiz")).reduce((carry, item) => {&nbsp; carry.push(item.textContent.trim())&nbsp; return carry;}, []);var question = 0;//var&nbsp; questions = [//&nbsp; &nbsp; "The color of the sky is...?",//&nbsp; &nbsp; "Paper comes from...?",//&nbsp; &nbsp; "How many hours in a day?"//&nbsp; ];var questions = Array.from(document.getElementsByClassName("quiz")).reduce((carry, item) => {&nbsp; carry.push(item.textContent.trim())&nbsp; return carry;}, []);var anim;var targets;function prepQuestion() {&nbsp; $("#questions").text(questions[question]);&nbsp; var textWrappers = document.querySelectorAll('#questions');&nbsp; textWrappers.forEach(textWrapper => {&nbsp; &nbsp; textWrapper.innerHTML = textWrapper.textContent.replace(/(\S*)/g, m => {&nbsp; &nbsp; &nbsp; return `<span class="word">` +&nbsp; &nbsp; &nbsp; &nbsp; m.replace(/(-|)?\S(-|@)?/g, "<span class='letter'>$&</span>") +&nbsp; &nbsp; &nbsp; &nbsp; `</span>`;&nbsp; &nbsp; });&nbsp; });&nbsp; targets = Array.from(document.querySelectorAll('#questions .letter'));&nbsp; anim = anime.timeline()&nbsp; &nbsp; .add({&nbsp; &nbsp; &nbsp; targets: targets,&nbsp; &nbsp; &nbsp; scale: [3, 1],&nbsp; &nbsp; &nbsp; scaleY: [1.5, 1],&nbsp; &nbsp; &nbsp; opacity: [0, 1],&nbsp; &nbsp; &nbsp; translateZ: 0,&nbsp; &nbsp; &nbsp; easing: "easeOutExpo",&nbsp; &nbsp; &nbsp; duration: 400,&nbsp; &nbsp; &nbsp; delay: (el, i) => 60 * i&nbsp; &nbsp; });}// initprepQuestion();function next() {&nbsp; anim = anime.timeline()&nbsp; &nbsp; .add({&nbsp; &nbsp; &nbsp; targets: targets.reverse(),&nbsp; &nbsp; &nbsp; scale: [1, 3],&nbsp; &nbsp; &nbsp; scaleY: [1, 1.5],&nbsp; &nbsp; &nbsp; opacity: [1, 0],&nbsp; &nbsp; &nbsp; translateZ: 0,&nbsp; &nbsp; &nbsp; easing: "easeOutExpo",&nbsp; &nbsp; &nbsp; duration: 100,&nbsp; &nbsp; &nbsp; delay: (el, i) => 30 * i&nbsp; &nbsp; });&nbsp; anim.complete = () => {&nbsp; &nbsp; if (question == questions.length - 1) {&nbsp; &nbsp; &nbsp; question = 0;&nbsp; &nbsp; } // reset question&nbsp; &nbsp; else {&nbsp; &nbsp; &nbsp; question++;&nbsp; &nbsp; }&nbsp; &nbsp; prepQuestion();&nbsp; };}#questions {&nbsp; font-weight: 900;&nbsp; font-size: 2.5em;&nbsp; font-family: rr;}#questions .letter {&nbsp; display: inline-block;&nbsp; line-height: 1em;}.word {&nbsp; white-space: nowrap;}<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 class="quiz">The color of the sky is...?</div><div class="quiz">Paper comes from...?</div><div class="quiz">How many hours in a day?</div><div class="quiz">A Giraffe is a fish?</div><div id="questions"></div><br><Button id="rc" onclick="next()">Next</Button>