1. 首頁
  2. 問答
  3. jquery切換和顯示視頻

jquery切換和顯示視頻

2010-12-14 76 views
0

我有這個僞代碼來顯示基於用戶選擇不同的內容，這工作正常。現在，我想進一步說，當用戶點擊視頻1時，我如何在視頻播放器上顯示視頻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（）屬性，這似乎有效。有更清潔還是更好的方法？我加了這個$​​（'＃video-player'）。html（' ...................................其中似乎工作 – user244394 2010-12-14 05:41:51

相關問題

 相關問題