1

これは、WordPress のショートコードで使用されているコードです。機能は一目瞭然です。これは単純なビデオ ギャラリーです。プレイリスト ボックスをクリックすると、メインのビデオ div の html が非表示の div の 1 つからのコンテンツに置き換えられます。

HTML

<div class="main-video">
    <iframe src="http://player.vimeo.com/video/50781537" frameborder="0" width="630" height="400"></iframe> 
</div>

    <div id="video-playlist-wrapper">
    <ul class="video-playlist">

    <a href="#"><li><div class="playlist-video-wrapper"><div class="playlist-video-title">Title 1</div><div id="playlist-video1">Desc 1</div></div></li></a>
    <a href="#"><li><div class="playlist-video-wrapper"><div class="playlist-video-title">Title 2</div><div id="playlist-video2">Desc 2</div></div></li></a>
    <a href="#"><li><div class="playlist-video-wrapper"><div class="playlist-video-title">Title 3</div><div id="playlist-video3">Desc 3</div></div></li></a>
    <a href="#"><li><div class="playlist-video-wrapper-last"><div class="playlist-video-title">Title 4</div><div id="playlist-video4">Desc 4</div></div></li></a>
    </ul>
    </div>

    <div id="playlist-video1-content" class="hidden-video"><iframe src="http://player.vimeo.com/video/50781537" frameborder="0" width="630" height="354"></iframe></div>
    <div id="playlist-video2-content" class="hidden-video"><iframe src="http://player.vimeo.com/video/50697289" frameborder="0" width="215" height="130"></iframe></div>
    <div id="playlist-video3-content" class="hidden-video"><iframe src="http://player.vimeo.com/video/50771550" frameborder="0" width="215" height="130"></iframe></div>
    <div id="playlist-video4-content" class="hidden-video"><iframe src="http://player.vimeo.com/video/50750012" frameborder="0" width="215" height="130"></iframe></div>



     </div>

JQuery

    jQuery(document).ready(function($) {

    $('#playlist-video1').click(function() {
    $('.main-video').html($('#playlist-video1-content').html());
    return false;
    });

    $('#playlist-video2').click(function() {    
    $('.main-video').html($('#playlist-video2-content').html());
    return false;
    });

    $('#playlist-video3').click(function() {    
    $('.main-video').html($('#playlist-video3-content').html());
    return false;
    });

    $('#playlist-video4').click(function() {
    $('.main-video').html($('#playlist-video4-content').html());
    return false;
    });

    });

問題: リンク イベントが依然として発生し、href="#" でページをリロードすると、ページの先頭にジャンプし、html が置き換えられないことがあります。それ以外の場合は、正常に動作し、メインのビデオがプレイリスト ビデオの 1 つに更新されます。

なぜこうなった？コードを繰り返し調べましたが、エラーや問題は見つかりません。これを xampp でローカルに開発したところ、すべて正常に機能し、問題はありませんでした。現在、WordPress サイトで壊れています。

ページがすでに Jquery を読み込んでいて、Video Gallery jquery の読み込みに時間がかかりすぎている可能性はありますか? どんな助けでも大歓迎です！ありがとう。

ここにフィドルがあります: http://jsfiddle.net/xjpv2/1/ `

4

2 に答える 2

1

少し前に作成した古い投稿のようなものですが、誰かが私が抱えていたのと同じ問題に遭遇した場合に備えて、それに答えると思いました.

私はゼロから始めました：

jQuery(document).ready(function(cash) {
    jQuery('.video-playlist a').click(function(e) {
    jQuery('#main-video-iframe').attr('src', jQuery(this).attr('data-url'));
    return false; 
});

});

と私の HTML (# vimeo 埋め込みの後は、単にビデオ ID です):

     <div class="main-video">
         <iframe src="http://player.vimeo.com/video/#" id="main-video-iframe"></iframe>
     </div>

 <div id="video-playlist-wrapper">
     <ul class="video-playlist">
        <li>
            <a href="#" data-url="http://player.vimeo.com/video/#">
               <div class="playlist-video-wrapper"></div>
            </a>
        </li>
     </ul> 
 </div>

私がこれに苦労したことを認めるのは恥ずかしいですが、それが将来誰かに役立つことを願っています.

于 2013-02-22T05:32:26.723 に答える
0

交換：

 $('#playlist-video1').click(function() {
    $('.main-video').html($('#playlist-video1-content').html());
    return false;
 });

と：

 $('#playlist-video1').click(function(e) {
    e.preventDefault();
    $('.main-video').html($('#playlist-video1-content').html());
 });
于 2012-12-03T16:48:23.477 に答える