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

Question

bigideahelm

I'm working on this Vimeo integration. I'm trying to swap out videos when you click on a particular thumbnail. Using a quick and dirty method of swapping classes with addClass and removeClass. Also swapping out the video with html function.

Trying to do this without reloading the page. It looks like the html updates but the videos do not update properly. Anyone have any thoughts?

Here's the 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>

And the jQuery code (I've only included one section of the code, it's repeated for each video thumbnail):

//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

Using the on function seems to update the DOM according and everything seems to be working as intended now. I was trying to change elements on the page as opposed to show/hiding elements that are already loaded.