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

Question

我正在使用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" width="480px" height="400px" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash">

当用户点击任意图片时，我想要show embed代码。

任何想法如何使用OWL Carousel执行此操作。

My JSFiddle

HTML部分：

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

jQuery Part：

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" width="480px" height="400px" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash">';
});

Answer 1

<强> Updated fiddle

您可以使用replaceWith：

$(this).replaceWith(embedData);

希望这有帮助。