JQuery для переключения и отображения видео

У меня есть этот псевдокод для отображения различного контента на основе выбора пользователя, который работает нормально. Теперь я хочу сделать еще один шаг, скажем, когда пользователь щелкает видео1, как я могу отобразить видео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>
Источник

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

Я бы серьезно переделал твои занятия. Вам, вероятно, не нужен определенный класс для каждого элемента, так как это противоречит цели классов.

Что касается воспроизведения видео, у вашего элемента есть видео строка, верно? Почему бы просто не передать ему URL через текст ссылки или скрытый элемент внутри <li> (грубый взлом).

Удачи!

Источник
Другие вопросы по тегам