Question

我正致力于此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');
  }
});

Answer 1

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

jQuery单击以加载视频/更改缩略图不起作用

1 个答案: