在 JavaScript 中传递参数时出现问题

Question

我有一个带幻灯片画廊的整页灯箱，我正在尝试重构我的代码，这样我就不必使用全局变量了。我正在努力将变量作为参数从一个函数传递到另一个函数。当我打开灯箱画廊时一切正常：看到正确的图像并显示计数器中的数字。当我想切换到下一张或上一张图像时，问题就开始了。我无法访问存储或存储灯箱打开时看到的当前图像的变量。我发布了没有变量声明的简化代码。

// This is a function which opens the lightbox with the galery after clicking on a thumbnail image.
function openSlideshowLightbox (event, currentSlide) {
  for (const [currentThumbnailImg] of thumbnailImgs.entries()) {
    if (event.target === thumbnailImgs[currentThumbnailImg]) {
      showCurrentSlide(currentSlide = currentThumbnailImg) 
    }
  }
} 

// This function shows the current slide containing an image
function showCurrentSlide (currentSlide) {
  for (const slide of slides) {
    if (slide.classList.contains('slide_visible')) {
      slide.classList.remove('slide_visible')
      slide.classList.add('slide_hidden')
    } else {
      slide.classList.add('slide_hidden')
    }
  }
  slides[currentSlide].classList.remove('slide_hidden')
  slides[currentSlide].classList.add('slide_visible')
}

以上都是一个动作，灯箱打开，功能完成任务。

现在我想切换到下一张或上一张图片，但我无法再访问下面函数中需要的 currentSlide 变量。

function navigateSlideshowLightbox (event, currentSlide) {
  if (previousImgIconClicked) {
    currentSlide = (currentSlide - 1 + allSlides) % allSlides
    showCurrentSlide(currentSlide)
  } else if (nextImgIconClicked) {
    currentSlide = (currentSlide + 1) % allSlides
    showCurrentSlide(currentSlide)
  }
}

我尝试在 showCurrentSlide() 中使用 return 语句：

return currentSlide

然后在 navigateSlideshowLightbox():

currentSlide = showCurrentSlide()

但是 currentSlide 是 undefiend。

Answer 1

（这实际上应该是评论，但是 space 中的运行用于那里的问题）

语句 currentSlide = showCurrentSlide() 可能什么都不做，因为 showCurrentSlide() 没有 return 值。 Return 值：

function showCurrentSlide (currentSlide) {
  for (const slide of slides) {
    if (slide.classList.contains('slide_visible')) {
      slide.classList.remove('slide_visible')
      slide.classList.add('slide_hidden')
    } else {
      slide.classList.add('slide_hidden')
    }
  }
  slides[currentSlide].classList.remove('slide_hidden')
  slides[currentSlide].classList.add('slide_visible')
  
  return currentSlide;
}

您的函数 navigateSlideshowLightbox() 也应该 return currentSlide，因为它正在修改它，对吗？
您的书面描述说您尝试使用 return 但它没有用 - post 您的代码是您拥有的，而不是您希望它工作的。

另一个好奇心：

showCurrentSlide(currentSlide = currentThumbnailImg)

我宁愿把它写成两行。

currentSlide = currentThumbnailImg;
showCurrentSlide(currentSlide);

在您当前的代码中不需要结果，为什么不直接提供该值？

showCurrentSlide(currentThumbnailImg);

Answer 2

如果您不向 showCurrentSlide() 函数传递参数，

currentSlide = showCurrentSlide() 将始终 return undefined，即使您添加了 return 语句.您需要在那里传递参数，例如currentSlide = showCurrentSlide(theSlide)。或者您可以执行以下操作作为快速简便的解决方案。

在下面的函数中，由于您已经在使用 slides 对象，只需将当前幻灯片添加到最后的 slides 对象中，以备后用：

function showCurrentSlide (currentSlide) {
    for (const slide of slides) {
        if (slide.classList.contains('slide_visible')) {
            slide.classList.remove('slide_visible')
            slide.classList.add('slide_hidden')
        } else {
            slide.classList.add('slide_hidden')
        }
    }
    slides[currentSlide].classList.remove('slide_hidden')
    slides[currentSlide].classList.add('slide_visible')
    slides.lastActiveSlide = currentSlide // Adding it here
}

然后当你运行 navigateSlideshowLightbox() 函数时，你可以直接到达那个对象属性而不是依赖参数。

function navigateSlideshowLightbox (event) {
    if (previousImgIconClicked) {
        const currentSlide = (slides.lastActiveSlide - 1 + allSlides) % allSlides
        showCurrentSlide(currentSlide)
    } else if (nextImgIconClicked) {
        const currentSlide = (slides.lastActiveSlide + 1) % allSlides
        showCurrentSlide(currentSlide)
    }
}

Answer 3

真的不需要使用参数。由于 navigateSlideshowLightbox() 执行与 openSlideshowLightbox() 不同的任务，我遍历 navigateSlideshowLightbox() 中的所有幻灯片，通过检查当前看到的幻灯片，我获得了幻灯片所需的索引位置，然后我将其分配到 currentSlide 变量。

function navigateSlideshowLightbox () {
    if (previousImgIconClicked) {
        for (const [slideVisible] of slides.entries()) {
          if (slides[slideVisible].classList.contains('slide_visible')) {
            currentSlide = (slideVisible - 1 + allSlides) % allSlides
          }
        }
        showCurrentSlide(currentSlide)
    } else if (nextImgIconClicked) {
        //  Here comes the same 'for' loop with if statement as above.
        currentSlide = (slideVisible + 1) % allSlides
        showCurrentSlide(currentSlide)
    }

在 JavaScript 中传递参数时出现问题

Problem with passing a parameter in JavaScript

javascript

parameter-passing