在这种情况下如何停止重复我的代码？

Question

我正在尝试用琐事 API 构建一个简单的游戏，这是我的 html 代码：

<body>
    <div class="container-fluid row">
        <div class="col question">
            <h5>Question</h5>
            <h2 class="text-primary">0/5</h2>
        </div>
        <div class="col score text-right">
            <h5>Score</h5>
            <h2 class="text-primary">0</h2>
        </div>
    </div>
    <div class="container bg-light">
        <h1 class="display-3" id="questions"> What is the answer to this question? </h1>
        <div class="info-question">
            <div class="choice" id="1"></div>

            <div class="choice" id="2"></div>

            <div class="choice" id="3"></div>

            <div class="choice" id="4"></div>

        </div>
    </div>

    <script src="/trivia/trivia.js"></script>
</body>

我的 Javascript 代码：

let question_one = document.getElementById('1')
let question_two = document.getElementById('2')
let question_three = document.getElementById('3')
let question_four = document.getElementById('4')
fetch(`https://opentdb.com/api.php?amount=5&category=9&difficulty=easy&type=multiple`)
    .then((response) => response.json())
    .then(({
        results,
    }) => {
        question_one.textContent = `Question 1: ${results[0].question}`
        question_two.textContent = `Question 2: ${results[1].question}`
        question_three.textContent = `Question 3: ${results[2].question}`
        question_four.textContent = `Question 4: ${results[3].question}`

    });

我正在尝试遍历结果问题，但不知道如何以及从哪里开始？ 我感谢每一个答案！

Answer 1

你可以这样做：

<div class="info-question">
        <div class="choice ques" id="1"></div>

        <div class="choice ques" id="2"></div>

        <div class="choice ques" id="3"></div>

        <div class="choice ques" id="4"></div>

    </div>

然后在js中：

let questions = document.querySelectorAll('.ques');
fetch(`https://opentdb.com/api.php?amount=5&category=9&difficulty=easy&type=multiple`)
    .then((response) => response.json())
    .then(({
        results,
    }) => {
        questions.map((ques, I) => {
            ques.textContent = `Question ${i+1}: ${results[i].question}`
        }

    });

确保您应该有一个唯一的 class 仅用于问题，在这种情况下为ques

Answer 2

您需要创建一个用作模板的 function。 您可以在 js 文件中定义 html 结构。

function getQuestionHTML(question, index){
  return `<div class="choice" id="${index}">${question}</div>`
}

const questionsInfoEl = docuement.querySelector('info-question');
fetch(`https://opentdb.com/api.php?amount=5&category=9&difficulty=easy&type=multiple`)
    .then((response) => response.json())
    .then(({
        results,
    }) => {
      const questionHTMLList = results.map((data, index) => getQuestionHTML(data.question, index));
      questionsInfoEl.insertAdjacentHTML('afterend', questionHTMLList.join(''));
    });

Answer 3

如果您有动态结果，您可能更愿意不初始化包含结果的div ，而只是一个容器：

const containerEl = document.getElementById('choices-container');

fetch(`https://opentdb.com/api.php?amount=5&category=9&difficulty=easy&type=multiple`)
    .then((response) => response.json())
    .then(({
        results,
    }) => {
        results.map((result, idx) => {
          const node = document.createElement('div')
          node.textContent = `Question ${idx + 1}: ${result.question}`
          node.classList.add('choice')
          containerEl.append(node)
        })
    });

同时更新 html：

 <div class="info-question" id="choices-container">
   <!-- Remove divs, just initialize container -->
 </div>

Answer 4

您的 HTML 和 js 文件在更改后将如下所示。

<body>
  <div class="container-fluid row">
     <div class="col question">
         <h5>Question</h5>
         <h2 class="text-primary">0/5</h2>
     </div>
     <div class="col score text-right">
         <h5>Score</h5>
         <h2 class="text-primary">0</h2>
    </div>
  </div>
  <div class="container bg-light">
     <h1 class="display-3" id="questions"> What is the answer to this question? </h1>
     <div class="info-question"></div>
 </div>
 <script src="/trivia/trivia.js"></script>

let questions = document.querySelector('.info-question');
fetch(`https://opentdb.com/api.php?amount=5&category=9&difficulty=easy&type=multiple`)
    .then((response) => response.json())
    .then(({results}) => {
        let fragment = document.createDocumentFragment();
        results.forEach((data,index)=>{
            let div = document.createElement('div');
           div.textContent = `Question ${index+1}: ${data.question}`;
           div.className = 'choice';
           div.id = index;
           fragment.appendChild(div);
        })
        questions.appendChild(fragment);

    });

在这种情况下如何停止重复我的代码？

问题描述

4 个解决方案

解决方案1
1 2020-05-06 19:21:12

解决方案2
1 2020-05-06 19:23:16

解决方案3
1 2020-05-06 19:25:26

解决方案4
0 2020-05-06 19:33:23

在这种情况下如何停止重复我的代码？

问题描述

4 个解决方案

解决方案1 1 2020-05-06 19:21:12

解决方案2 1 2020-05-06 19:23:16

解决方案3 1 2020-05-06 19:25:26

解决方案4 0 2020-05-06 19:33:23

解决方案1
1 2020-05-06 19:21:12

解决方案2
1 2020-05-06 19:23:16

解决方案3
1 2020-05-06 19:25:26

解决方案4
0 2020-05-06 19:33:23