jquery切换和显示视频

发布于 2024-10-07 14:58:35 字数 3173 浏览 1 评论 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>

原文

I have this pseudo code to display different content based on user selection, which works fine. Now, I want to take this a step further, say when a user click video1, how can i display a video1 on the video-player , video 2 on then video-player etc?
- thanks

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

ゞ花落谁相伴 2024-10-14 14:58:35

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

$('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（粗略的 hack）。

祝你好运！

Just to make the code smaller (assuming you are to keep your button names constant), this should work:

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

I would seriously rework your classes. You probably don't need a specific class for each element, as that defeats the purpose of classes.

As for the video playback, your element does have the video string, right? Why not just pass a URL to it via the link's text, or a hidden element within the <li> (a crude hack).

Good luck!

回复收藏 0 原文

~没有更多了~