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

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

来源

2013-01-21 Dave Rottino

这是什么意思，视频不正确更新？你意识到'jQuery（'div'）'选择*所有* div，对吧？ –

当前显示的视频没有缩略图显示。我使用.hasClass（“ClassName”）来搜索录像机窗口中的哪一个。这是一个快速和肮脏的解决方案，但它的工作原理。看看链接并向下滚动到视频播放器，看看我指的是什么。点击几个视频，你会看到这个问题。 –

而不是使用'.hasClass'我想你想使用'$（this）.hasClass'。 '.Class'将始终返回true，因为*每个* div都将被检查，并且这将完全无法按预期工作。 –

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

来源

2013-01-21 03:48:49

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

回答

相关问题