如何使用Vanilla Js循环遍历carousel项目

Question

我正在从电影数据库获取数据，我希望检索到的数据显示在我的页面上有3张幻灯片的旋转木马卡。这是我目前所做的，html,

<div class="details"><!--Movie details are to be displayed here--></div>

Js,

<script type="text/javascript">
function arrangement(resultFromServer) {
let gridHtml=" ";
let poster= "https://image.tmdb.org/t/p/w185/";
let element= document.querySelector(".details");
let index= [].indexOf.call(element.parentElement.children, element);
let selected = resultFromServer.results[index];
for (let i = 0; i < resultFromServer.results.length; i++) {
const movieResults =resultFromServer.results[i];
gridHtml += `
<div id="multi-item-example" class="carousel slide carousel-multi-item" data-ride="carousel">
<!--Indicators-->
<ol class="carousel-indicators">
<li data-target="#multi-item-example" data-slide-to="0" class="active"></li>
<li data-target="#multi-item-example" data-slide-to="1"></li>
<li data-target="#multi-item-example" data-slide-to="2"></li>
</ol>
<!--/.Indicators-->
<!--Slides-->
<div class="carousel-inner" role="listbox">
<!--First slide-->
<div class="carousel-item active">
<div class="row">
<div class="col-md-4">
<div class="card mb-2">
<img class="card-img-top" src="${poster}${movieResults.poster_path}"
alt="Card image cap">
<div class="card-body">
<h4 class="card-title">${movieResults.title}</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the
card's content.</p>
<a class="btn btn-primary">Button</a>
</div>
</div>
</div>
</div>
</div>
</div>`;
}
let myPage= document.querySelector(".details");
myPage.innerHTML=gridHtml;
}
</script>

我从中得到的是电影细节以垂直排列返回。谁来帮帮我!

Answer 1

您需要使用querySelector来检查是否有'活动'类。

function myFunction(e) {
var carousel = document.querySelector(".active");
if(carousel !==null){
carousel.classList.remove("active");
}
e.target.className = "active";
}

querySelector用于查找页面上的活动类，如果它存在(if语句)，则删除它并在下一个元素上应用活动类，遍历整个集合。