Nuxt.js图片画廊JS循环简化代码返回undefined求助

问题背景 #

使用Nuxt.js开发图片画廊，功能是提取缩略图的背景图用于全屏画廊展示。原代码功能正常但存在大量重复冗余，尝试用循环简化JS代码后，出现返回undefined的问题，无法正常运行。

问题原因 #

1. DOM加载时机错误：简化后的代码未包裹在window.addEventListener('load')或Nuxt的DOM就绪生命周期钩子中，代码执行时DOM元素可能还未完全渲染，导致querySelectorAll无法获取到目标元素，进而出现photoFullscreen[i]为undefined的情况。
2. 原简化代码中每次循环都重复调用document.querySelectorAll(".photo-fullscreen")，属于不必要的性能损耗。

修复后的完整JS代码 #

window.addEventListener('load', function () {
  // 批量同步缩略图背景图到全屏图片
  const photos = document.querySelectorAll(".photo");
  const photoFullscreens = document.querySelectorAll(".photo-fullscreen");
  
  for (let i = 0; i < photos.length; i++) {
    const style = photos[i].currentStyle || window.getComputedStyle(photos[i], false);
    const photoBackground = style.backgroundImage.replace(/url\((['"])?(.*?)\1\)/gi, '$2').split(',')[0];
    // 可选：添加存在性判断避免报错
    photoFullscreens[i]?.setAttribute("src", photoBackground);
  }

  // 批量绑定弹窗打开事件
  const photoGalleryFullscreen = document.querySelector(".photo-gallery-fullscreen");
  const imageFullscreens = document.querySelectorAll(".slide-container img");
  
  document.querySelectorAll(".lienImg").forEach((el, index) => {
    el.onclick = function() {
      photoGalleryFullscreen.style.display = "block";
      imageFullscreens[index].style.display = "block";
      slideIndex = index + 1;
    };
  });

  // 弹窗关闭事件
  document.querySelector(".out").onclick = function() {
    photoGalleryFullscreen.style.display = "none";
    imageFullscreens.forEach(img => img.style.display = "none");
    slideIndex = 1;
  };
});

// 全屏画廊切换逻辑
let slideIndex;

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function showSlides(n) {
  const slides = document.querySelectorAll(".photo-fullscreen");
  if (n > slides.length) slideIndex = 1;
  if (n < 1) slideIndex = slides.length;
  
  slides.forEach(slide => slide.style.display = "none");
  slides[slideIndex - 1].style.display = "block";
}

配套修改Vue模板中的类名，将lienImg1、lienImg2、lienImg3统一改为lienImg，方便批量选择：

<div class="photo-gallery">
  <div class="photo lienImg"></div>
  <div class="photo lienImg"></div>
  <div class="photo lienImg"></div>
</div>

更符合Nuxt/Vue规范的优化方案 #

作为Nuxt.js项目，更推荐用Vue响应式机制替代原生DOM操作，避免时机问题同时提升代码可维护性：

1. 组件脚本部分：

export default {
  data() {
    return {
      slideIndex: 1,
      isFullscreenOpen: false,
      galleryImages: [
        "/images/yoga.jpg",
        "/images/yoga-2.jpeg",
        "/images/yoga-3.jpeg"
      ]
    };
  },
  methods: {
    openFullscreen(index) {
      this.isFullscreenOpen = true;
      this.slideIndex = index + 1;
    },
    closeFullscreen() {
      this.isFullscreenOpen = false;
      this.slideIndex = 1;
    },
    plusSlides(n) {
      this.slideIndex += n;
      if (this.slideIndex > this.galleryImages.length) this.slideIndex = 1;
      if (this.slideIndex < 1) this.slideIndex = this.galleryImages.length;
    }
  }
};

2. 修改Vue模板：

<section class="photo-gallery-section" id="photo-gallery-section">
  <h2 class="photo-gallery-title">Gallerie Photo</h2>

  <div class="photo-gallery">
    <div 
      v-for="(img, index) in galleryImages" 
      :key="index"
      class="photo"
      :style="{ background: `url(${img}) center center / cover` }"
      @click="openFullscreen(index)"
    ></div>
  </div>

  <div 
    class="photo-gallery-fullscreen"
    v-show="isFullscreenOpen"
    @click.self="closeFullscreen"
  >
    <a class="prev" @click="plusSlides(-1)">&#10094;</a>
    <a class="next" @click="plusSlides(1)">&#10095;</a>

    <div class="slide-container">
      <img 
        v-for="(img, index) in galleryImages" 
        :key="index"
        class="photo-fullscreen"
        :src="img"
        v-show="slideIndex === index + 1"
      />
    </div>
  </div>
</section>

3. SCSS部分可移除针对nth-child的背景图设置，因为已通过Vue动态绑定实现。

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