代码之家 › 专栏 › 技术社区 › Whip

jQuery-变量正在实例间共享

multiple-instances jquery-plugins scope jquery

0

Whip · 技术社区 · 7 年前

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

我试着把它和我能找到的任何教程拼凑在一起,也看了一些类似的问题,但都没用。代码如下:

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));

1 回复 | 直到 7 年前

1

0

errand 7 年前

根据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
})

https://jsfiddle.net/6e9xk5wz/1/