3

大理念

我正在研究这个 Vimeo 集成。当您单击特定缩略图时，我正在尝试换出视频。使用 addClass 和 removeClass 交换类的快速而肮脏的方法。还用 html 功能换出视频。

尝试在不重新加载页面的情况下执行此操作。它看起来像 html 更新，但视频没有正确更新。有人有什么想法吗？

这是HTML：

    <div class="thumbnails">
        <div class="jake"><img style="display:inline; position: relative;" src="wp-content/themes/skeleton/images/jake.jpg" /></div>
        <div class="katy"><img style="display:inline; position: relative;" src="wp-content/themes/skeleton/images/katy.jpg" /></div>
        <div class="cary"><img style="display:inline; position: relative;" src="wp-content/themes/skeleton/images/cary.jpg" /></div>
    </div>

还有 jQuery 代码（我只包含了一段代码，每个视频缩略图都会重复）：

//CARY
jQuery(".cary").click(function(){
  jQuery('#videoplayer').html('<iframe src="http://player.vimeo.com/video/57695418?api=1" width="470" height="264" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>');

  if(!(jQuery('div').hasClass('jake'))) {
    jQuery('.cary').html('<img style="display:inline; position: relative;" src="wp-content/themes/skeleton/images/jake.jpg" />');
    jQuery('.cary').addClass('jake');
    jQuery('.jake').removeClass('cary');
  }

  if(!(jQuery('div').hasClass('katy'))) {
    jQuery('.cary').html('<img style="display:inline; position: relative;" src="wp-content/themes/skeleton/images/katy.jpg" />');
    jQuery('.cary').addClass('katy');
    jQuery('.katy').removeClass('cary');
  }

  if(!(jQuery('div').hasClass('roderick'))) {
    jQuery('.cary').html('<img style="display:inline; position: relative;" src="wp-content/themes/skeleton/images/roderick.jpg" />');
    jQuery('.cary').addClass('roderick');
    jQuery('.roderick').removeClass('cary');
  }
});
4

1 回答 1

0

使用 on 函数似乎可以更新 DOM，现在一切似乎都按预期工作。我试图更改页面上的元素，而不是显示/隐藏已加载的元素。

于 2013-01-21T03:48:49.907 回答