1

这是 WordPress 短代码中使用的代码。功能几乎不言自明：它是一个简单的视频库 - 单击播放列表框将主视频 div 的 html 替换为隐藏 div 之一的内容。

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。其他时候它可以正常工作，并且主视频会使用其中一个播放列表视频进行更新。

为什么会这样？我反复查看代码，找不到任何错误或问题。当我使用 xampp 在本地开发它时，一切正常，没有问题。现在在 WordPress 网站上，它正在崩溃。

页面是否可能已经加载了太多的 Jquery，并且加载视频库 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 回答