动态向Swiper JS追加slide时CSS样式错乱问题修复

动态生成的Swiper样式错乱是三个核心错误导致的：

• ID重复：页面中id属性必须全局唯一，静态编写的Swiper已经占用了#swiperRegular，动态生成时重复使用该ID，会导致Swiper初始化时始终匹配到第一个静态实例，新生成的Swiper没有被正确初始化，导航按钮也会因全局类名匹配出现绑定混乱。
• DOM结构残缺：动态拼接的HTML字符串只写了开标签，缺失多层</div>闭合标签，最终渲染的DOM层级和静态版本完全不一致，CSS选择器无法匹配到对应元素，样式自然失效。
• 选择器范围错误：初始化Swiper时导航按钮使用全局类选择器，没有限定在当前Swiper容器范围内，会把页面所有同名导航按钮绑定到同一个实例，触发功能和样式异常。
• 初始化逻辑冗余：页面加载时已经初始化过静态Swiper，不需要重复执行全局初始化逻辑。

1. 移除动态生成Swiper上的重复ID，改用类名或直接引用当前DOM对象做初始化
2. 补全动态拼接HTML的所有闭合标签，保证DOM结构和静态编写的版本完全一致
3. 初始化动态Swiper时，导航按钮的查找范围限定在当前容器内，禁止全局匹配
4. 必须等完整DOM结构插入页面后，再执行对应Swiper实例的初始化

// 初始化静态编写的第一个Swiper，限定导航按钮查找范围在静态容器内
new Swiper('#swiperRegular', {
  direction: 'horizontal',
  slidesPerView: 5,
  spaceBetween: 10,
  slidesPerGroup: 5,
  navigation: {
    nextEl: '.level3 .swiper-button-next',
    prevEl: '.level3 .swiper-button-prev',
    disabledClass: 'disabled_swiper_button'
  }
});

let myArray = ['test1', 'test2', 'test3', 'test4', 'test5']
const result = Object.values(
  myArray.map((x, i) => ({
    grp: Math.floor(i / 5),
    val: x
  }))
  .reduce((acc, i) => {
    acc[i.grp] ||= [];
    acc[i.grp].push(i.val);
    return acc;
  }, {})
);

result.forEach((elm) => {
  // 补全所有闭合标签，移除重复ID，用自定义类标识动态生成的Swiper
  const dataElem = $(`<div class="level3Items">
    <div class="swiper dynamic-swiper">
      <div class="swiper-button-prev"><i class="fa-solid fa-arrow-left"></i></div>
      <div class="swiper-button-next"><i class="fa-solid fa-arrow-right"></i></div>
      <div class="swiper-wrapper"></div>
    </div>
  </div>`);

  // 往当前分组的swiper-wrapper内插入slide
  const slideWrapper = dataElem.find('.swiper-wrapper');
  elm.forEach(item => {
    slideWrapper.append(`<div class="swiper-slide">
      <div class="topSwiperSlideItems">
        <div class="imgCon">
          <img src="https://imagesvc.meredithcorp.io/v3/mm/image?q=60&c=sc&poi=%5B660%2C300%5D&w=1500&h=750&url=https%3A%2F%2Fstatic.onecms.io%2Fwp-content%2Fuploads%2Fsites%2F20%2F2021%2F07%2F23%2Fgrizzly-bear-1.jpg" />
        </div>
      </div>
      <div class="bottomSwiperSlideItems">
        <div class="textCon">
          <p>${item}</p>
        </div>
      </div>
    </div>`)
  });

  // 先把完整DOM结构插入页面容器
  $(".level3_2").append(dataElem);

  // 初始化当前分组的Swiper实例，导航按钮只查找当前容器内的元素，避免全局冲突
  new Swiper(dataElem.find('.dynamic-swiper')[0], {
    direction: 'horizontal',
    slidesPerView: 5,
    spaceBetween: 10,
    slidesPerGroup: 5,
    navigation: {
      nextEl: dataElem.find('.swiper-button-next')[0],
      prevEl: dataElem.find('.swiper-button-prev')[0],
      disabledClass: 'disabled_swiper_button'
    }
  });
})

原有CSS代码不需要任何修改，DOM结构修复、实例初始化正确后，.level3_2的显示效果会和静态的.level3完全一致。

内容的提问来源于stack exchange，提问作者seriously