jQuery - 跨实例共享变量

Posted 2021-04-24

我正在创建一个图像滑块插件，它可以在单个实例中正常工作，但是当我在页面上有多个实例时，变量将在这些实例之间共享，尤其是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));

答案

根据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/