第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題，去搜搜看，總會(huì)有你想問的

我如何使用 div 類中的這些 JS 數(shù)組數(shù)據(jù)而不是數(shù)組

我如何使用 div 類中的這些 JS 數(shù)組數(shù)據(jù)而不是數(shù)組

慕標(biāo)5832272 2023-09-28 17:16:51
在這個(gè)腳本中有三個(gè)問題作為 JS 數(shù)組，但我想使用 div 類內(nèi)容而不是 js 數(shù)組。這是我的js動(dòng)畫，帶有“下一步”按鈕，它在下一個(gè)數(shù)組旁邊一一進(jìn)行動(dòng)畫處理，但我希望這些帶有測(cè)驗(yàn)類的div必須像該數(shù)組一樣，一一進(jìn)行動(dòng)畫處理。<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數(shù)組結(jié)構(gòu)是這樣的：questions = [        "The color of the sky is...?",      "Paper comes from...?",        "How many hours in a day?"];但我想使用這個(gè) div 類內(nèi)容而不是數(shù)組格式<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++){所以請(qǐng)可愛的 stackoverflow 社區(qū)的任何成員都可以幫助我解決這個(gè)問題。預(yù)先感謝您的幫助。
查看完整描述

1 回答

?
ABOUTYOU

TA貢獻(xiàn)1812條經(jīng)驗(yàn) 獲得超5個(gè)贊

使用


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>


查看完整回答
反對(duì) 回復(fù) 2023-09-28
  • 1 回答
  • 0 關(guān)注
  • 120 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)