将活动类添加到动态生成 html 的数组中的第一张幻灯片

Question

我正在动态创建一个 JS 滑块 HTML，但我不知道如何将

active

类添加到数组中的第一个对象。这是我尝试的最后一件事，有什么想法吗？数据来自 location.js 中的数组。

所有幻灯片都通过循环显示在屏幕上 - 我想做的是通过在第一张幻灯片周围添加粗边框来定位第一张幻灯片，但

dislayFirstSlide

功能不起作用。

<div class="slider">
  <div class="slider_inner"></div>
</div>

const slideInner = document.querySelector(".slider_inner");
const main_slide = document.createElement("div");
main_slide.setAttribute('class', 'slide');
slideInner.appendChild(main_slide);

const mainSlide = document.querySelector(".slide");

window.addEventListener("DOMContentLoaded", function() {
  const showMainSlide = locations.map((location, index) => {
    return `
      <div class="main_slide_wrapper" key=${location.id}>
        <div class="main_slide_item">
          <div class="slide-body-image" style="background: url(${location.image});">
            <h5 class="card-title">${location.title}</h5>
            <a href=${location.ctaLink}>Go</a>
          </div>
        </div>
      </div>`
  });

  mainSlide.innerHTML = showMainSlide;
});

displayFirstSlide();

function displayFirstSlide() {
  document.getElementsByClassName('main_slide_wrapper')[0].classList.add('active').style.border = '10px solid blue !important';
}

Answer 1

啊明白了，这正是我想要的

window.addEventListener("DOMContentLoaded", function () {

    const showMainSlide = locations.map((location, index) => {
        return `
                <div class="main_slide_wrapper" key=${location.id}>
                <div class="main_slide_item">
                    <div class="slide-body-image" style="background: url(${location.image});">
                        <h5 class="card-title">${location.title}</h5>
                        <a href=${location.ctaLink}>Go</a>
                    </div>
                </div>
                </div>`
    });

    mainSlide.innerHTML = showMainSlide;

    displayFirstSlide();
    function displayFirstSlide() {
        document.getElementsByClassName('main_slide_wrapper')[0].classList.add('active');
    }
}); 

``` much appreciate the responses. Cheers.