Question

我有这个伪代码，根据用户选择显示不同的内容，工作正常。现在，我想更进一步说，当用户点击video1时，如何在视频播放器上显示视频1，在视频播放器上显示视频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>

Answer 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传递给它。

祝你好运！

jquery切换和显示视频

1 个答案: