如何使用 Vanilla Js 遍历轮播项目

如何解决如何使用 Vanilla Js 遍历轮播项目

我正在从电影数据库中获取数据，并且我希望检索到的数据显示在我的页面中的带有 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>

我从中得到的是电影详细信息以垂直排列方式返回。有人可以帮忙吗！

解决方法

您需要使用 querySelector 来检查“活动”类。

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

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