猿问

手风琴显示来自 API 的数据

我有一些来自 API 的数据，这些数据显示在我的网页上。我还为手风琴准备了一些简单的 HTML。我有 4 批数据，我想在手风琴上的每张幻灯片上只显示一批数据。我该怎么做？我想知道如何根据我的代码分离每张幻灯片的数据。


$( function() {

  $( "#top-stories" ).accordion();

});


fetch('https://api.nytimes.com/svc/topstories/v2/technology.json?api-key='')

.then((resp) => resp.json())

.then(function(data) {

   const accordionSlides = document.querySelectorAll(".accordion-slide");

   data.results.slice(0, 4).forEach((accordion, i) => {

    accordionSlides[i].innerHTML = `

      <h1>${accordion.title}</h1>

      <p>${accordion.url}</p>

      <p>${accordion.abstract}</p>

      <p>${accordion.published_date}</p>

      <img src="${accordion.multimedia[4].url}"/>`;

  })


})

<html>

 <head>

        <link rel="stylesheet" href="styles.css">

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

        <script src="index.js"></script>

    </head>

    <body>

        <div id="top-stories">Top Stories</h1>

            <h3 class="accordion">Story 1</h3>

            <div class="panel">

                <div class="accordion-title"></div>

            </div>


            <h3 class="accordion">Story 2 - Collapsed</h3>

            <div class="panel">

                    <div class="accordion-title"></div>

            </div>


            <h3 class="accordion">Story 3 - Collapsed</h3>

            <div class="panel">

                    <div class="accordion-title"></div>

            </div>

            <h3 class="accordion">Story 4 - Collapsed</h3>

            <div class="panel">

                    <div class="accordion-title"></div>

            </div>

    </body>

</html>


MMMHUHU
浏览 168回答 2
2回答

FFIVE

如果您愿意使用 jquery-ui 库，则以下内容应该有效。首先，您的 HTML 应如下所示：<html>&nbsp;<head>&nbsp; &nbsp; &nbsp; &nbsp; <link rel="stylesheet" href="styles.css">&nbsp; &nbsp; &nbsp; &nbsp; <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>&nbsp; &nbsp; &nbsp; &nbsp; <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>&nbsp; &nbsp; &nbsp; &nbsp; <script src="index.js"></script>&nbsp; &nbsp; </head>&nbsp; &nbsp; <body>&nbsp; &nbsp; &nbsp; &nbsp; <div id="top-stories">Top Stories</h1>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3 class="accordion">Story 1</h3>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="panel">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="accordion-slide"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3 class="accordion">Story 2 - Collapsed</h3>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="panel">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="accordion-slide"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3 class="accordion">Story 3 - Collapsed</h3>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="panel">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="accordion-slide"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3 class="accordion">Story 4 - Collapsed</h3>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="panel">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="accordion-slide"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </body></html>我已将 ID 更改为类并将按钮替换为 h3 标签。另外，我添加了一个指向 jquery-ui 库的链接。然后 JS 主要是由@marzelin 建议的，并添加了 jquery-ui 库初始化：$( function() {&nbsp; &nbsp; $( "#top-stories" ).accordion();});fetch('https://api.nytimes.com/svc/topstories/v2/technology.json?api-key="."')&nbsp; .then((resp) => resp.json())&nbsp; .then(function(data) {&nbsp; &nbsp; &nbsp;const accordionSlides = document.querySelectorAll(".accordion-slide");&nbsp; &nbsp; &nbsp;data.results.slice(0, 4).forEach((accordion, i) => {&nbsp; &nbsp; &nbsp; accordionSlides[i].innerHTML = `&nbsp; &nbsp; &nbsp; &nbsp; <h1>${accordion.title}</h1>&nbsp; &nbsp; &nbsp; &nbsp; <p>${accordion.url}</p>&nbsp; &nbsp; &nbsp; &nbsp; <p>${accordion.abstract}</p>&nbsp; &nbsp; &nbsp; &nbsp; <p>${accordion.published_date}</p>&nbsp; &nbsp; &nbsp; &nbsp; <img src="${accordion.multimedia[4].url}"/>`;&nbsp; &nbsp; })&nbsp; })
0

哈士奇WWW

更改<div id="accordion"></div>为<div class="accordion-slide"></div>然后：fetch('https://api.nytimes.com/svc/topstories/v2/technology.json?api-key="."')&nbsp; .then((resp) => resp.json())&nbsp; .then(function(data) {&nbsp; &nbsp; &nbsp;// get all slides&nbsp; &nbsp; &nbsp;const accordionSlides = document.querySelectorAll(".accordion-slide");&nbsp; &nbsp; &nbsp;data.results.slice(0, 4).forEach((accordion, i) => {&nbsp; &nbsp; &nbsp; // insert content into a given slide&nbsp; &nbsp; &nbsp; accordionSlides[i].innerHTML = `&nbsp; &nbsp; &nbsp; &nbsp; <h1>${accordion.title}</h1>&nbsp; &nbsp; &nbsp; &nbsp; <p>${accordion.url}</p>&nbsp; &nbsp; &nbsp; &nbsp; <p>${accordion.abstract}</p>&nbsp; &nbsp; &nbsp; &nbsp; <p>${accordion.published_date}</p>&nbsp; &nbsp; &nbsp; &nbsp; <img src="${accordion.multimedia[4].url}"/>`;&nbsp; &nbsp; })&nbsp; })
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答