如何在点击事件上用嵌入代码替换 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">

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

任何想法如何使用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 部分：

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);

希望这会有所帮助。