0

iframe で再生中のサムネイル ビデオに境界線を追加しようとしています。

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

    $("#video-thumbs li").click(関数(e){
        e.preventDefault();
        $("#video-thumbs li").addClass("current").not(this).removeClass("current");
      });

});

<iframe width="1020" height="574" id="myvideo" src="http://www.youtube.com/embed/Qdse1SEBimw" frameborder="0" allowfullscreen=""></iframe>
<ul id="video-thumbs">
    <li class="current" style="margin-left: 0;">
    <div id="playbtn" onclick="document.getElementById('myvideo').src='http://www.youtube.com/embed/Qdse1SEBimw'"></div>
    <img src="files/lamb.png" width="326" height="181">
    </li>
    <li>
    <div id="playbtn" onclick="document.getElementById('myvideo').src='http://www.youtube.com/embed/WZknytdWWhI'"></div>
    <img src="files/tuna.png" style="width: 326px">
    </li>
    <li style="margin: 0 0 0 11px">
    <div id="playbtn" onclick="document.getElementById('myvideo').src='http://www.youtube.com/embed/BAembvTjChs'"></div>
    <img src="files/myers.png" width="326" height="181">
    </li>
</ul>
4

2 に答える 2

3

ロジックを切り替えます。

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

    $("#video-thumbs li").click(function(e){
        e.preventDefault();
        $("#video-thumbs li").removeClass("current"); // Remove all instances
        $(this).addClass("current"); // Add `.current` to $(this) object only
    });

});
于 2012-08-10T20:19:23.163 に答える
1

HTML を別の方法で構造化してみて、見苦しい onclick 関数を削除してください:

<iframe width="1020" height="574" id="myvideo" src="http://www.youtube.com/embed/Qdse1SEBimw" frameborder="0" allowfullscreen=""></iframe>
<ul id="video-thumbs">
    <li style="margin-left: 0;">
        <div class="playbtn" data-url='http://www.youtube.com/embed/Qdse1SEBimw'></div>
        <img src="files/lamb.png" width="326" height="181" class="current">
    </li>
    <li>
        <div class="playbtn" data-url='http://www.youtube.com/embed/WZknytdWWhI'></div>
        <img src="files/tuna.png" style="width: 326px">
    </li>
    <li style="margin: 0 0 0 11px">
        <div class="playbtn" data-url='http://www.youtube.com/embed/BAembvTjChs'></div>
        <img src="files/myers.png" width="326" height="181">
    </li>
</ul>​​​​​​​​​

今いくつかのjQueryのことをしてください：

$(function(){
    $("#video-thumbs li").on('click', function(){
        $(this).find('img').addClass("current").end()
               .siblings().find('img').removeClass("current");
        $("#myvideo").prop('src', $(this).find('div').data('url'));
    });
});​

そして、それはうまくいくはずですか？ここにフィドルがあります

于 2012-08-10T20:52:09.700 に答える