无法定位 Swiper 滑块变量，因为它们是在函数内部定义的

Question

I have 4 each functions which call a Swiper slider with the appropriate options.在将它们附加到正确的 div 之后，我然后添加将它们链接在一起的代码，因此一个滑块控制另一个滑块，反之亦然。

我收到错误 "Uncaught ReferenceError: swiperV2 is not defined"。我认为这是因为它们在每个函数中并且对它们的引用不 'see' 它们。

关于如何解决这个问题有什么想法吗？

谢谢

$(".swiper-container-v").each(function(index, element) {
  var $this = $(this);
  $this.addClass("instance-" + index);
  $this.find(".swiper-button-prev").addClass("btn-prev-" + index);
  $this.find(".swiper-button-next").addClass("btn-next-" + index);
  var swiperV = new Swiper(".swiper-container-v.instance-" + index, {
      // your settings ...
      pagination: '.swiper-pagination-v',
      paginationClickable: true,
      direction: 'vertical',
      spaceBetween: 0,
      mousewheelControl: false,
      speed: 600,
      nextButton: ".btn-next-" + index,
      prevButton: ".btn-prev-" + index
  });
});

$(".swiper-container-h").each(function(index, element) {
  var $this = $(this);
  $this.addClass("instance-" + index);
  $this.find(".swiper-button-prev").addClass("btn-prev-" + index);
  $this.find(".swiper-button-next").addClass("btn-next-" + index);
  var swiperH = new Swiper(".swiper-container-h.instance-" + index, {
    // your settings ...
    pagination: '.swiper-pagination-h',
    paginationClickable: true,
    spaceBetween: 0,
    parallax: true,
    speed: 600,
    nextButton: ".btn-next-" + index,
    prevButton: ".btn-prev-" + index
  });
});



$(".swiper-container-v2").each(function(index, element) {
  var $this = $(this);
  $this.addClass("instance-" + index);
  $this.find(".swiper-button-prev").addClass("btn-prev-" + index);
  $this.find(".swiper-button-next").addClass("btn-next-" + index);
  var swiperV2 = new Swiper(".swiper-container-v2.instance-" + index, {
    // your settings ...
    paginationClickable: true,
    direction: 'vertical',
    spaceBetween: 0,
    mousewheelControl: false,
    speed: 600
  });
});


$(".swiper-container-h2").each(function(index, element) {
  var $this = $(this);
  $this.addClass("instance-" + index);
  $this.find(".swiper-button-prev").addClass("btn-prev-" + index);
  $this.find(".swiper-button-next").addClass("btn-next-" + index);
  var swiperH2 = new Swiper(".swiper-container-h2.instance-" + index, {
    // your settings ...
    paginationClickable: true,
    spaceBetween: 0,
    parallax: true,
    speed: 600
  });
});

swiperV2.params.control = swiperV;
swiperH2.params.control = swiperH;
swiperV.params.control = swiperV2;
swiperH.params.control = swiperH2;

Answer 1

真的....这就是作用域的工作原理，并且在所有基于 class/function 的编程语言中几乎无处不在。

为了能够访问函数范围内的变量，您必须在预期作用于它的范围内的该函数之外为其创建一个引用。

所以如果你有这样的东西，

func() {
  var myVar = ...
}

print(myVar)

这将不起作用，因为存在于函数范围之外的全局范围没有 myVar 是什么的概念。

因此您需要先创建对该变量的引用。

var myVar;

func() {
  var myVar = ...
}

print(myVar)

现在由于 myVar 是在函数范围之外生成的，所以函数知道 myVar。

或者，您可以 return myVar 的值并执行类似的操作。

func() {
  return myVar = ...
}

var myFunc = func();

print(myFunc())

你实际上已经执行了一个函数赋值（即，将该函数赋给一个变量），在这种情况下，代理变量存储了函数的 return 值。

无法定位 Swiper 滑块变量，因为它们是在函数内部定义的

Cannot target Swiper slider variables as they are defined inside functions

html

javascript

jquery

swiper