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 コード (コードの 1 つのセクションのみを含めました。ビデオのサムネイルごとに繰り返されます):

//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 に答える