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

问：

我正在动态创建一个 JS 滑块 HTML，但我不知道如何将类添加到数组中的第一个对象。这是我尝试的最后一件事，有什么想法吗？来自 location.js 中的数组的数据。active

所有幻灯片都通过循环显示在屏幕上 - 我试图做的是通过在它周围添加一个粗边框来瞄准第一张幻灯片，但该功能不起作用。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';
}

JavaScript 数组 DOM

嗨，所以根据我的 ''' displayFirstSlide（）;function displayFirstSlide（） { document.getElementsByClassName（'main_slide_wrapper'）[0].classList.add（'active'）.style.border = '10px solid blue ！important'; } ''' 这不是一种以第一个对象为目标并向其添加活动类的方法吗？

0赞 CBroe 10/16/2023

你不能一开始就这样做，因为该方法没有返回值;因此，此时无法进行方法链接。.classList.add('active').style.border = ...add

答：

0赞 devo_dev 10/16/2023 #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.

上一个：JavaScript如何填充选项选择？

下一个：为什么更新对象中的嵌套数组不会触发子组件重新渲染？

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

Add active class to first slide in an array where the html is being dynamically generated

评论