1. ホーム
  2. 質問と答え
  3. ビデオを切り替えて表示するためのjquery

ビデオを切り替えて表示するためのjquery

2010-12-14 6 views
0

私はこの擬似コードを使用して、ユーザーの選択に基づいて異なるコンテンツを表示することができます。今、私はこれをさらに進化させたいと思います。ユーザーがvideo1をクリックすると、ビデオプレーヤーでビデオ1を、ビデオプレーヤーでビデオ2をどのように表示できますか？ - 感謝ビデオを切り替えて表示するためのjquery

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<style type="text/css"> 
#leftmenu-b {width:330px; float:left; bordeR:1px solid #ccc;} 
#video-player-b {width:700px; float:left; margin-left:20px;} 

.videoSelect1 { border:1px solid red;background-color:#ccc;} 
.videoSelect2 {border:3px solid green;background-color:#fff;} 
.videoSelect3 {border:6px solid yellow;background-color:yellow;} 




#video-player { border:1px solid red; height:200px ;width:600px; padding:10px;} 


ul li {display:block; width:300px; padding:20px;} 
</style> 
<script language="javascript" src="jquery.js"> </script> 

<script language="javascript"> 
$(document).ready(function() { 

$('#video1').click(function() { 

    $('#video-player').attr("class", "videoSelect1"); //video1 
    $('#video-player').text("video1"); 
    $('#video1').addClass('videoSelect1'); 
    $('#video2').removeClass('videoSelect2'); 
    $('#video3').removeClass('videoSelect3'); 
    //$('#video-player').addClass("videoSelect1"); 
// $('#video-player2').addClass("videoNotSelected"); 
// $('#video-player3').addClass("videoNotSelected"); 

}); 
$('#video2').click(function() { 
    $('#video-player').attr("class", "videoSelect2"); //video2 
     $('#video2').addClass('videoSelect2'); 
     $('#video-player').text("video2"); 
    $('#video1').removeClass('videoSelect1'); 
// $('#video2').reomveClass('videoSelect2'); 
    $('#video3').removeClass('videoSelect3'); 
// $('#video-player').addClass("videoSelect2"); 
// $('#video-player1').removeClass("videoNotSelected"); 
// $('#video-player3').addClass("videoNotSelected"); 
    // $('#video-player1').removeClass("videoSelect1"); 

}); 
$('#video3').click(function() { 
    $('#video-player').attr("class", "videoSelect3"); //video3 
     $('#video3').addClass('videoSelect3'); 
     $('#video-player').text("video3"); 
    $('#video1').removeClass('videoSelect1'); 
    $('#video2').removeClass('videoSelect2'); 
    //$('#video3').reomveClass('videoSelect3'); 
// $('#video-player2').addClass("videoNotSelected"); 
// $('#video-player1').addClass("videoNotSelected"); 
// $('#video-player3').removeClass("videoNotSelected"); 
    // $('#video-player').addClass("videoSelect3"); 
    // $('#video-player1').removeClass("videoSelect1"); 
    // $('#video-player2').removeClass("videoSelect2"); 

}); 
}); 
</script> 
</head> 

<body> 

<div id="video-wrapper"> 

    <div id="leftmenu-b"> 
    <ul> 
     <li><a href="#" id="video1" class="videoSelect1">video1</a></li> 
     <li><a href="#" id="video2">video2</a></li> 
     <li><a href="#" id="video3">video3</a></li> 
     </ul> 
    </div> 
    <div id="video-player-b"> 
    <div id="video-player" class="videoSelect1"> 
     VIDEO 1 
    </div> 
    </div> 

    </div> 

</body> 
</html>

出典

2010-12-14 user244394

答えて

1

ただ、コードを小さくする（あなたがボタン名を一定に保つようにしていると仮定して）、これは動作するはずです：

$('leftmenu-b ul li a').click(function() 
{ 
    $('leftmenu-b ul li a').each(function() 
    { 
    $(this).removeClass('videoSelect' + $(this).attr('id').substring(5, 6)); 
    }); 

    number = $(this).attr('id').substring(5, 6); 

    $(this).addClass('videoSelect' + number); 
    $('#video-player').attr('class', 'videoSelect' + number); 
    $('#video-player').text($(this).attr('id')); 
});

私は真剣にうあなたのクラスを手直し。おそらく、クラスの目的を破るので、各要素に特定のクラスは必要ありません。

ビデオの再生に関しては、要素にビデオ文字列があります。リンクのテキスト、または<li>（原油ハック）内の隠された要素を介してURLを渡すだけではいかがですか。

幸運を祈る！

出典

2010-12-14 05:13:03 Blender

+0

ありがとうございます。私はビデオプレーヤーを埋め込み、divコンテナ内のユーザーの選択に基づいてビデオを再生したい。私は各ビデオの埋め込みコードを渡すことでjqueryのhtml（）属性を使用する方向に傾いていましたが、これはうまくいくようです。そこにクリーナーまたはより良い方法はありますか？ html（ ' ...................................うまくいくようだ – user244394

関連する問題

 関連する問題