如何在点击事件上用嵌入代码替换 OWL Carousel 图像

Posted 2023-02-16

【中文标题】如何在点击事件上用嵌入代码替换 OWL Carousel 图像

【英文标题】：How to replace OWL Carousel image with embed code on click event

【发布时间】：2016-06-15 02:30:29

【问题描述】：

我正在使用OWL Carousel 显示项目，现在我想将此嵌入代码替换为单击的图像：

<embed src="http://sample.biz/scratch.swf" wmode="direct" quality="high" flashvars="project_filePath=http://sample.biz/public/upload/scratchproject/2016/02/Ignition.sb2"   pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash">

我想在用户点击任何图片时显示嵌入代码。

任何想法如何使用OWL Carousel 做到这一点。

My JSFiddle.

HTML 部分：

<div id="example" class="carousel">
  <div class="item">
    <img src="http://dummyimage.com/vga"  />
  </div>
  <div class="item">
    <img src="http://dummyimage.com/vga"  />
  </div>
  <div class="item">
    <img src="http://dummyimage.com/vga"  />
  </div>
  <div class="item">
    <img src="http://dummyimage.com/vga"  />
  </div>
</div>

jQuery 部分：

var currentIndex = 0;
$(document).ready(function() 

  $("#example").owlCarousel(
    items: 5,
    singleItem: true,
    afterMove: function() 
      currentIndex = this.currentItem;
    
  ).on('changed.owl.carousel', function(property) 
    currentIndex = property.item.index;
    console.log(currentIndex);
  );

);

$(document.body).on('click', '#example .item img', function() 
  var embedData = '<embed src="http://sample.biz/scratch.swf" wmode="direct" quality="high" flashvars="project_filePath=http://sample.biz/public/upload/scratchproject/2016/02/Ignition.sb2"   pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash">';
);

【参考方案1】：

Updated fiddle

您可以使用replaceWith：

$(this).replaceWith(embedData);

希望这会有所帮助。