Как мне получить текущий идентификатор элемента, который вызвал событие HorizonSwiper в javascript?

Я реализовал HorizonSwiper на своем веб-сайте php (Yii2) для загрузки изображений одного альбома в одну строку с левой и правой прокруткой, а также свайпом и наличием нескольких альбомов на этой странице, каждый из которых имеет разные идентификаторы. И теперь мне нужно добавить ленивую загрузку при прокрутке влево / вправо или смахивании влево / вправо. Но я не получил текущий выбранный идентификатор div, чтобы найти идентификатор альбома прокручиваемых изображений.

Я использовал следующую ссылку для реализации Swiper: http://horizon-swiper.sebsauer.de/

И мой код javascript, как показано ниже,

$('.horizon-swiper.fix-item-width').horizonSwiper({
  showItems: 7,
  arrows: true,
  onSlideStart: function(){
    alert('slide started');
  },
  onDragStart: function(){
    alert('drag started');
  }
});

Я добавил свой идентификатор альбома с одним div '.horizon-swiper.fix-item-width' и получил его внутри функций onSlideStart и onDragStart.

Мой html выглядит следующим образом:

<div class="horizon-swiper fix-item-width" id="alb_<?php echo $album['albumId']; ?>">
  <div class="horizon-item" data-horizon-index="0" id="img_<?php echo $album['albumId']; ?>_<?php echo $count; ?>">
     <div class="card view view-second"> 
        <img class="img responsive " src="<?php echo $baseurl; ?>/images/uploaded_images/profile/<?php echo $img['img']; ?>" width="100%;" height="350px;">
     </div>
  </div>
</div>

Обратите внимание, что этот HTML-код находится в цикле for

Может ли кто-нибудь помочь найти одно решение для этого?

Заранее спасибо...


javascript php swiper slide yii2-advanced-app
person Saritha Ks    schedule 21.07.2016    source источник
comment
Поскольку onSlideStart является событием, его аргумент по умолчанию будет event. Для доступа к элементу вы можете использовать event.target. Кроме того, поскольку там $, я предполагаю, что существует даже jQuery. Так что вы можете попробовать $(this).attr('id')   -  person Rajesh    schedule 21.07.2016
comment
Я получаю undefined при использовании $ (this) .attr ('id')   -  person Saritha Ks    schedule 21.07.2016
comment
Можете ли вы создать скрипку? Так было бы легче отлаживать. Также попробуйте войти this и проверить, есть ли его элемент или что-то еще.   -  person Rajesh    schedule 21.07.2016
comment
Когда я регистрирую это внутри onSlideStart, получаю массив объектов, содержащий элементы HorizonSwiper, такие как animationSpeed ​​500 arrowNextText arrowPrevText стрелки true dots false item .horizon-item mouseDrag true numberedDots false showItems 7 onDragEnd onDragEnd () onDragStart function () onEndlidend () onEndlidend function () onEndlidend Функция onSlideStart () onStart onStart ()   -  person Saritha Ks    schedule 21.07.2016
comment
К тому же я не мог создать для этого скрипку. Swiper там не работает   -  person Saritha Ks    schedule 21.07.2016

Ответы (1)


arrow_upward
0
arrow_downward

Я видел исходный код Horizon-swiper.js. Но, насколько я думаю, в нем нет какой-либо функциональности, с помощью которой вы можете получить ссылку на текущий элемент, на котором происходит swiper (извините, я могу ошибаться, у меня не было достаточно времени, чтобы тщательно его проверить). Итак, я немного изменил файл horizon-swiper.js, и теперь вы можете получить ссылку на текущий элемент, на котором происходит swiper.

в верхней части файла Horizon-swiper.js заменить

var settings = {

// Default settings
item: '.horizon-item',
showItems: 'auto',
dots: false,
numberedDots: false,
arrows: true,
arrowPrevText: '',
arrowNextText: '',
animationSpeed: 500,
mouseDrag: true,

// Methods and callbacks
onStart: function onStart() {},
onEnd: function onEnd() {},
onSlideStart: function onSlideStart() {},
onSlideEnd: function onSlideEnd() {},
onDragStart: function onDragStart() {},
onDragEnd: function onDragEnd() {},

  };

с участием

var settings = {

// Default settings
item: '.horizon-item',
showItems: 'auto',
dots: false,
numberedDots: false,
arrows: true,
arrowPrevText: '',
arrowNextText: '',
animationSpeed: 500,
mouseDrag: true,

// Methods and callbacks
onStart: function onStart() {},
onEnd: function onEnd() {},
onSlideStart: function onSlideStart() {},
onSlideEnd: function onSlideEnd() {},
onDragStart: function onDragStart() {},
onDragEnd: function onDragEnd() {},
currentElm:""
  };

Я только что добавил еще одно значение в объект настроек с именем "currentElm"

и добавьте следующую функцию

Plugin.prototype.getElem=function(){
    this.settings.currentElm=this.$element;
}

после функции Plugin.prototype.init

и заменить

Plugin.prototype.init = function () {
  var that = this;

  that._setWrapper();
  that._addArrows();
  that._addDots();
  that._mouseDrag();
  that._setSizes();
  that._resize();

  that._checkPosition();
  that.initialized = true;
    };

с участием

Plugin.prototype.init = function () {
  var that = this;

  that._setWrapper();
  that._addArrows();
  that._addDots();
  that._mouseDrag();
  that._setSizes();
  that._resize();

  that._checkPosition();
  that.getElem(); //call here our newly made function
  that.initialized = true;
    };

Теперь вы можете получить ссылку на элемент, как показано ниже.

$('.horizon-swiper.fix-item-width').horizonSwiper({
  arrows: true,
  dots:true,
  onSlideStart: function(){
    console.log($(this)[0].currentElm.attr('id'));
  },
  onDragStart: function(){

  }
});

убедитесь, что у вас есть атрибут id для каждого div. Я надеюсь, это поможет.

person localhost    schedule 21.07.2016