1. 홈
  2. 질의 응답
  3. jquery로 비디오를 전환하고 표시합니다.

jquery로 비디오를 전환하고 표시합니다.

2010-12-14 3 views
0

사용자 선택에 따라 다른 내용을 표시하는 의사 코드가 있으므로 정상적으로 작동합니다. 이제 사용자가 video1을 클릭하면 어떻게 비디오 플레이어에 비디오 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')); 
});

내가 심각 클래스를 재 작업 것이다. 클래스의 목적을 상쇄 할 수 있으므로 각 요소에 대해 특정 클래스가 필요하지 않을 수도 있습니다.

동영상 재생의 경우 요소에 동영상 문자열이 포함되어 있습니까? 링크 텍스트를 통해 URL을 전달하거나 <li> (숨겨진 핵) 내 숨겨진 요소를 전달하지 않는 것이 좋습니다.

행운을 빈다.

출처

2010-12-14 05:13:03 Blender

+0

감사합니다. 나는 비디오 플레이어를 임베드하고 div 컨테이너 내부의 사용자 선택에 따라 비디오를 재생하려고합니다. 나는 jquery html() 애트리뷰트를 각 비디오에 대한 임베딩 코드를 전달하여 사용하는쪽으로 기울어졌다. 거기에 청소기 또는 더 나은 방법이 있습니까? 나는이 비트를 $ ('# video-player') 추가했다 .html (' ................................... 일하는 것 같다. – user244394

관련 문제

 관련 문제