jQuery - переменная распределяется между экземплярами - PullRequest
Новая
       9

jQuery - переменная распределяется между экземплярами

0 голосов
/ 17 сентября 2018

Я делаю плагин для слайдера изображений, который отлично работает с одним экземпляром, но когда у меня есть несколько экземпляров на странице, переменные распределяются между этими экземплярами, особенно 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));

1 Ответ

0 голосов
/ 17 сентября 2018

в соответствии с областью JavaScript w3s: 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/

...