如何正确访问并禁用SwiperJS中的嵌套swiper组件？

问题根因 #

你的HTML结构中每个父级swiper的slide内都有一个.mySwiper2子swiper元素，直接使用new Swiper(".mySwiper2")初始化时，只会返回第一个匹配元素的实例赋值给swiper2变量，剩余子swiper的实例没有被你存储，自然无法通过swiper2.disable()控制所有子swiper。同时你没限定子swiper的导航、分页选择器的作用范围，还会出现多个子swiper共用同一组导航按钮的冲突。

修复方案 #

1. 遍历所有子swiper元素分别初始化，将所有实例存入数组统一管理，同时限定导航、分页选择器的作用范围为当前子swiper内部：

// 父swiper初始化逻辑保持不变
var swiper = new Swiper(".mySwiper", {
    direction: "vertical",
    mousewheel: true,
});

// 存储所有子swiper实例的数组
var childSwipers = [];
document.querySelectorAll('.mySwiper2').forEach(el => {
  let childSwiper = new Swiper(el, {
    loop: true,
    navigation: {
      nextEl: el.querySelector(".swiper-button-next"),
      prevEl: el.querySelector(".swiper-button-prev"),
    },
    pagination: {
      el: el.querySelector('.swiper-pagination'),
    },
  });
  childSwipers.push(childSwiper);
})

2. 修改toggleOverlay函数的禁用/启用逻辑，批量操作所有子swiper实例：

function toggleOverlay(event) {
  var overlay = event.currentTarget.nextElementSibling;
  if (overlay.classList.contains("overlay-hide")){
    overlay.classList.remove("overlay-hide");
    overlay.classList.add("overlay-show");
    swiper.disable();
    // 禁用所有子swiper
    childSwipers.forEach(ins => ins.disable());
  } else if (overlay.classList.contains("overlay-show")){
    overlay.classList.remove("overlay-show");
    overlay.classList.add("overlay-hide");
    swiper.enable();
    // 启用所有子swiper
    childSwipers.forEach(ins => ins.enable());
  }
}

Stack Snippet报错说明 #

Stack Snippet会将自定义JS代码放在沙箱作用域中运行，你在HTML行内写的onclick="toggleOverlay(event)"默认访问的是全局作用域的函数，沙箱内定义的toggleOverlay不会自动挂载到window上，所以会抛出ReferenceError。要解决这个问题可以手动将函数挂载到全局：window.toggleOverlay = function(event) { /* 原有逻辑 */ }，本地直接运行HTML时函数默认处于全局作用域，所以不会报错。

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