jQuery - 变量在实例之间共享

Question

我正在制作一个图像滑块插件，它可以在单个实例上正常工作，但是当我在页面上有多个实例时，变量会在这些实例之间共享，尤其是 currentPosition。如何对它们进行沙箱处理并保持实例隔离？

我尝试将它与我能找到的任何教程拼凑在一起，并且还查看了关于 SO 的类似问题，但它们没有帮助。代码如下：

var slider = $('.slider').mySlider();

...

;(function ($) {
  var defaults = {
    auto: false,
    delay: 4000,
    controls: true,
    controlsPosition: 'inside', //inside, outside, neighbors
    prevHtml: '<i class="material-icons">chevron_left</i>',
    nextHtml: '<i class="material-icons">chevron_right</i>',
    width: 70,
    transitionSpeed: 400,
    onLoad: function() {},
    onSlideEnd : function() {}
  };

  var mySliderInit = function (el, options) {
    var settings = $.extend({}, defaults, options || {}),
    el = $(el);
    el.wrap('<div class="mySlider-outerwrapper"><div class="mySlider-wrapper"></div></div>');

    var outerWrapper = el.closest('.mySlider-outerwrapper'),
    wrapper = el.closest('.mySlider-wrapper');

    var numSlides = el.find('li').length,
    numElements = numSlides+4,
    wrapperWidth = wrapper.width(),
    slideWidth = wrapperWidth*(settings.width)/100,
    sideWidth = wrapperWidth*((100 - settings.width)/2)/100;

    var slides = el.find('li');
    slides.width(slideWidth);

    //first move
    var index = 0;
    var slideMovement = wrapperWidth*settings.width/100;
    var firstMovement = currentPosition = -(slideWidth-sideWidth+slideWidth);
    el.css('transform', 'translateX('+(firstMovement)+'px)');

    if(settings.controls){
      outerWrapper.append('<a href="#" class="mySlider-nav mySlider-prev">'+settings.prevHtml+'</a>');
      outerWrapper.append('<a href="#" class="mySlider-nav mySlider-next">'+settings.nextHtml+'</a>');
    }

    function moveSlider(direction){
      if(direction == 'forward'){
        index++;
        currentPosition -= slideWidth;
      } else if(direction == 'backward'){
        index--;
        currentPosition += slideWidth;
      }
      $(slides[index+2]).addClass('active').siblings().removeClass('active');
      el.css('transform', 'translateX('+currentPosition+'px)');

    }

    outerWrapper.on('click', '.mySlider-next', function(e){
      e.preventDefault();
      moveSlider('forward');
    });

    outerWrapper.on('click', '.mySlider-prev', function(e){
      e.preventDefault();
      moveSlider('backward');
    });

    return this;
  };

  $.fn.mySlider = function (settings){
    return this.each(function(){
      new mySliderInit($(this), settings);
    });
  }

}(jQuery));

Answer 1

根据 w3s javascript 范围：If you assign a value to a variable that has not been declared, it will automatically become a GLOBAL variable.

根据您的 console.log - 您的代码似乎适用于索引变量，根据您单击的滑块具有不同的值。 currentPosition 变量没有声明，而是直接赋值。尝试在代码区域插入一行 var currentPosition，如 var index = 0;

--- 不是解决方案的一部分 ---

几年前，我发现了一个非常简单的自制幻灯片的想法。我将其用于图像轮播，其中仅显示一张图像。但也许你可以想办法把它适应你的幻灯片。

这个轮播的想法是，简单地将第一个元素移动到末尾或将最后一个元素移动到第一个位置，这取决于你去的方向。 在我的示例中，没有控件，而是一个简单的向前点击事件

$(".mySlideElement").on("click", function(){ //the click event on any slide element
var myParent = $(this).parent(); //get the parent of your current set of slide elements
var myElements = myParent.find(".mySlideElement"); //get all slide elements
$(myElements).first().appendTo(myParent); //take the first one and move it to the end
})

我构建了一个小 jsfiddle，在这里：https://jsfiddle.net/6e9xk5wz/1/