Question

我正在使用猫头鹰传送带2 。我的页面上有几个按钮。单击这些按钮之一时，将进行AJAX调用。来自该ajax调用的是图像ID。我将图像ID与猫头鹰轮播中的ID进行比较，然后想跳到匹配的幻灯片。

但是，无论我如何尝试，索引号都会返回0。因此，猫头鹰总是跳到第一张图片。我尝试了几件事，但无法正常工作。

带有按钮的我的列表

<div class="spo-list">
  <div class="spo-item" data-image="47059110">Dunkelrot</div>
  <div class="spo-item" data-image="47059111">Rot</div>
</div>

我的滑块

<div class="thumbnail-slider-container"> 
  <div id="thumbnailSlider" class="thumbnail-slider owl-carousel"> 
    <div data-imageid="47059110"><img src="image" /></div>
    <div data-imageid="47059111"><img src="image" /></div>
  </div> 
</div>

代码

$('.spo-item').on('click', function(){
  var img = $(this).data('image')
  var url = link-to-page
  $.ajax({
    url: url,
    success:function(data) {
      var next_id = data.image_id // the ID that comes from the call like '47059110' 
      var next_slide = var next_slide = $('#thumbnailSlider').find('div[data-imageid="'+next_id+'"]').closest('.owl-item').index()
      console.log(next_slide)
      $('#thumbnailSlider').trigger('to.owl.carousel', [next_slide, 300, true]); 
      // this jumps to first image since "next_slide" always is 0
    }
  });
});

我只是看不到获取索引有什么问题。我以此question作为参考。

有人知道吗？预先感谢

Answer 1

好的，我找到了解决问题的办法！问题是我试图获取错误元素的索引。猫头鹰轮播将每个项目包装在一个称为owl-item的div中。因此，当您尝试获取一项的索引号时，由于包装元素中只有一项，因此它始终为索引0。实际的html看起来像这样：

<div class="thumbnail-slider-container"> 
  <div id="thumbnailSlider" class="thumbnail-slider owl-carousel"> 
    <div class="owl-item"><div data-imageid="47059110"><img src="image" /></div></div>
    <div class="owl-item"><div data-imageid="47059111"><img src="image" /></div></div>
  </div> 
</div>

因此要获得正确的索引，您需要使用：

var next_slide = $('#thumbnailSlider').find('div[data-imageid="'+next_id+'"]').closest('.owl-item').index()

ajax调用后，猫头鹰轮播跳至特定索引

1 个答案: