jQuery删除内容，当我尝试在点击事件上播放不同的视频时

jQuery remove contents when i try to play a different video on click event

本文关键字：事件 播放 的视频 删除 jQuery      更新时间：2023-09-26

我正在处理一个页面，我需要在同一页面中播放YouTube视频，当用户单击任何列出的视频时，它应该将标题和日期复制到活动视频区域。

就我而言，它会复制内容并更改视频，但是当我单击视频列表时，它会删除活动链接。

尝试单击链接，它将一一删除它们，视频也不会显示

我在jsFiddle上的代码

.HTML

<div style="float:left; width=800px;" id="video_container">
    <div class="active-iframe">
        <iframe width="438" height="250" src="http://www.youtube.com/embed/vOnCRWUsSGA?wmode=transparent&rel=0&theme=light&color=white&autoplay=0" frameborder="0" allowfullscreen="1"></iframe>
    </div>
</div>
<span class="active-video-title">Title</span>
<span class="active-video-date">Date</span>
<div class="row">
    <br> <a href="oDAw7vW7H0c" class="play-youtube">
            <span class="youtube-thumbnail">Thumnnail 1</span>
       <div class="title-wrapper">
            <span class="title">Title of the Video 1</span>
             <span class="date">Date  1</span>
        </div>
        </a>
    <br> <a href="5F-Wge37_ys" class="play-youtube">
            <span class="youtube-thumbnail">Thumnnail 2</span>
        <div class="title-wrapper">
            <span class="title">Title of the Video 2</span>
             <span class="date">Date  2</span>
            </div>
        </a>
</div>
<div class="row2">
    <br> <a href="oDAw7vW7H0c" class="play-youtube">
            <span class="youtube-thumbnail">featured Thumnnail 1</span>
        <div class="title-wrapper-control">
            <span class="featured-title">featured Title of the Video 1</span>
             <span class="featured-date">featured Date  1</span>
        </div>
        </a>
    <br> <a href="5F-Wge37_ys" class="play-youtube">
            <span class="youtube-thumbnail">featured Thumnnail 2</span>
        <div class="title-wrapper-control">
            <span class="featured-title">featured Title of the Video 2</span>
             <span class="featured-date">featured Date  2</span>
        </div>
        </a>
</div>

更改此内容 

$(".active-iframe").html($(this).html(htm));

自 

$(".active-iframe").html(htm);

看看：http://jsfiddle.net/KSMZ9/40/

这是因为

这条线

$(".active-iframe").html($(this).html(htm));

替换链接的 HTML，而不是 iframe 的来源。相反：

$('iframe').attr('src', 'http://www.youtube.com/embed/' + URL);

并跳过var htm = ..

演示/分叉小提琴 http://jsfiddle.net/5RnAe/

相关文章：