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

Question

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

我使用以下链接实现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');
  }
});

我已将我的相册ID添加到一个＆＃39; .horizo​​n-swiper.fix-item-width＆＃39; 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。但据我所知，它没有任何功能可以让你获得当前元素的参考信息，因为我可能错了，我没有足够的时间来检查它深）。所以我稍微修改了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:""
  };

我刚刚在设置对象中添加了一个名为＆＃34; currentElm＆＃34;

的值

并添加以下功能

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(){

  }
});

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