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

【问题标题】：jQuery click to load video/change thumbnail not workingjQuery单击加载视频/更改缩略图不起作用
【发布时间】：2013-01-21 03:25:05
【问题描述】：

bigideahelm

我正在处理这个 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');
  }
});

【问题讨论】：

视频没有正确更新是什么意思？你意识到jQuery('div') 选择了 all div，对吧？
当前显示的视频没有缩略图显示。我正在使用 .hasClass("ClassName") 来搜索视频播放器窗口中的哪个。这是一个快速而肮脏的解决方案，但它确实有效。查看链接并向下滚动到视频播放器以查看我所指的内容。点击几个视频，你就会看到问题。
而不是使用.hasClass 我想你想使用$(this).hasClass。 .hasClass 将一直返回 true，因为每个 div 都在被检查，这完全不会像你期望的那样工作。
这似乎正在解决，因为它们只是页面上该类中的一个。感谢您的帮助，但我已经解决了我的问题。使用 on 函数似乎可以根据需要更新 DOM，现在一切似乎都按预期工作了。

标签： jquery html css vimeo

【解决方案1】：

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

【讨论】：