如何获取触发javascript中的horizo​​nSwiper事件的当前元素ID？

Question

我已经在我的php（Yii2）网站中实现了horizo​​nSwiper，以便通过左右滚动以及滑动在一行中加载一张专辑的图像，并且该页面中的多张专辑的ID均不同。 现在，我需要在向左/向右滚动或向左/向右滑动时添加延迟加载。 但是我没有得到当前选择的div ID来找到滚动图像相册ID。

我使用以下链接来实现swiper， http： //horizo​​n-swiper.sebsauer.de/

和我的JavaScript代码如下

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

我已经将专辑ID和一个'.horizo​​n-swiper.fix-item- width'div添加在一起 ， 并将其放入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循环中

谁能帮忙找到一种解决方案？

先感谢您...

Answer 1

我已经看过源代码horizo​​n-swiper.js。 但据我所知，它没有任何功能可用来获取正在进行swiper的当前元素的引用（对不起，我可能错了，我没有足够的时间进行深入检查）。 因此，我对horizo​​n-swiper.js文件进行了一些修改，现在您可以获取正在进行swiper的当前元素的引用。

在horizo​​n-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;
    };

现在，您可以像下面那样获取element的引用。

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

  }
});

确保每个div都有id属性。 我希望这将有所帮助。