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 - 您的代码似乎适用于 index 变量，根据您单击的滑块具有不同的值。 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/

jQuery - 变量正在跨实例共享

jQuery - Variable is being shared across instances

scope

multiple-instances

jquery-plugins