文章/答案/技术大牛

发布

社区首页 >问答首页 >用于切换和显示视频的jquery

问用于切换和显示视频的jquery
EN

Stack Overflow用户

提问于 2010-12-14 12:50:24

回答 1查看 531关注 0票数 0

我有这个伪代码来根据用户选择显示不同的内容，它工作得很好。现在，我想更进一步，比如当用户单击video1时，我如何在视频播放器上显示video1，然后在视频播放器上显示视频2，等等？

    <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>

jquery

video

switching

回答 1

Stack Overflow用户

回答已采纳

发布于 2010-12-14 13:13:03

只是为了使代码更小(假设您要保持按钮名称不变)，这应该是可行的：

$('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'));
});

我会认真修改你的课程。您可能不需要为每个元素指定一个特定的类，因为这违背了类的用途。

至于视频回放，您的元素确实有视频字符串，对吧？为什么不通过链接的文本传递一个URL给它，或者一个隐藏在<li>中的元素(一个原始的黑客)。

祝好运!

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/4435988

复制

相似问题

问用于切换和显示视频的jquery
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用于切换和显示视频的jqueryEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用于切换和显示视频的jquery
EN