我有一些来自 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>
2 回答
FFIVE
TA贡献1797条经验 获得超6个赞
如果您愿意使用 jquery-ui 库，则以下内容应该有效。
首先，您的 HTML 应如下所示：
<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-slide"></div>
</div>
<h3 class="accordion">Story 2 - Collapsed</h3>
<div class="panel">
<div class="accordion-slide"></div>
</div>
<h3 class="accordion">Story 3 - Collapsed</h3>
<div class="panel">
<div class="accordion-slide"></div>
</div>
<h3 class="accordion">Story 4 - Collapsed</h3>
<div class="panel">
<div class="accordion-slide"></div>
</div>
</body>
</html>
我已将 ID 更改为类并将按钮替换为 h3 标签。另外，我添加了一个指向 jquery-ui 库的链接。
然后 JS 主要是由@marzelin 建议的，并添加了 jquery-ui 库初始化：
$( 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}"/>`;
})
})
哈士奇WWW
TA贡献1799条经验 获得超6个赞
更改<div id="accordion"></div>为<div class="accordion-slide"></div>然后：
fetch('https://api.nytimes.com/svc/topstories/v2/technology.json?api-key="."')
.then((resp) => resp.json())
.then(function(data) {
// get all slides
const accordionSlides = document.querySelectorAll(".accordion-slide");
data.results.slice(0, 4).forEach((accordion, i) => {
// insert content into a given slide
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}"/>`;
})
})
添加回答
举报
0/150
提交
取消