我如何使用 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) => {

  carry.push(item.textContent.trim())

  return carry;

}, []);

var question = 0;

//var  questions = [

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

//    "Paper comes from...?",

//    "How many hours in a day?"

//  ];

var questions = Array.from(document.getElementsByClassName("quiz")).reduce((carry, item) => {

  carry.push(item.textContent.trim())

  return carry;

}, []);

var anim;

var targets;

function prepQuestion() {

  $("#questions").text(questions[question]);

  var textWrappers = document.querySelectorAll('#questions');

  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('#questions .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();

  };

}

#questions {

  font-weight: 900;

  font-size: 2.5em;

  font-family: rr;

}

#questions .letter {

  display: inline-block;

  line-height: 1em;

}

.word {

  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>