이미지 목록에서 어떤 이미지를 클릭했는지 추적하고 있습니까?

Question

비디오 미리보기 이미지에 해당하는 이미지 세트가 있습니다. 사용자가 브라우저를로드하는 엄지 손가락을 클릭합니다. 이것은 충분히 간단하지만 클릭 한 엄지 손가락을 추적해야하므로 순서대로 다음 비디오를 자동으로 큐에 넣을 수 있습니다.

내 첫번째 생각은 다음과 같이 (매우 간단한 예) 할 :이 괜찮을 것 같다 언뜻

<div class="thumbs"> 
<img id="vt_0" src="thumbxxx00.jpg" /> 
<img id="vt_1" src="thumbxxx01.jpg" /> 
<img id="vt_2" src="thumbxxx02.jpg" /> 
<img id="vt_3" src="thumbxxx03.jpg" /> 
<img id="vt_4" src="thumbxxx04.jpg" /> 
<img id="vt_5" src="thumbxxx05.jpg" /> 
<img id="vt_6" src="thumbxxx06.jpg" /> 
</div> 

<script type="text/javascript"> 
var videos = [ "xxx00", "xxx01", "xxx02", "xxx03", "xxx04", "xxx05", "xxx06" ]; 
var video_index = null; 

function playVideo(id) { 
// play video then call "onVideoFinish()" when video ends. 

} 

function onVideoFinish() { 
    video_index = (video_index = 6) ? video_index : video_index+1; 
    playVideo(videos[video_index]); 
} 

    $j("div.thumbnail img").live("click", function (e) { 
     e.preventDefault(); 
     var selected_id = $(this).attr("id").split("_")[1]; 
     video_index = selected_id; 
     playvideo(videos[video_index]); 
    }); 

</script> 

을하지만, 나는 이것이 제일/가장 우아한 해결책이 있는지 확실하지 않습니다 특히 개체 컨텍스트 내에서 이러한 모든 메서드를 구현할 때 유용합니다.

Answer 1

이것은 내가 어떻게 할 것입니다. 이 경우에 필요한 유일한 전역은 기본 설정 또는 구성 모델의 일부로 누군가를 저장할 수있는 currentPlayOrder입니다.

먼저 HTML을 입력하십시오. 비디오 소스를 연관된 미리보기 이미지의 rel 속성으로 옮겼습니다. 귀하의 응용 프로그램이 축소판 그림을 생성한다고 가정합니다.이 경우 축소판 그림을 생성하는 모든 요소가 관련 비디오 소스를 인식 할 수 있기 때문에 적절한 방법입니다.

<div class="thumbs"> 
    <img id="vt_0" src="http://stackoverflow.com/content/img/so/logo.png" rel="videoA"/> 
    <img id="vt_1" src="http://serverfault.com/content/img/sf/logo.png" rel="videoB"/> 
    <img id="vt_2" src="http://stackoverflow.com/content/img/so/logo.png" rel="videoC"/> 
    <img id="vt_3" src="http://serverfault.com/content/img/sf/logo.png" rel="videoD"/> 
    <img id="vt_4" src="http://stackoverflow.com/content/img/so/logo.png" rel="videoE"/> 
    <img id="vt_5" src="http://serverfault.com/content/img/sf/logo.png" rel="videoF"/> 
    <img id="vt_6" src="http://stackoverflow.com/content/img/so/logo.png" rel="videoG"/> 
</div> 

이제는 JS입니다. 플레이 순서를 결정하는 previousSibling 및 nextSibling의 사용을 주목하라 : 도움이

<script type="text/javascript"> 

var PLAY_ORDER_BACKWARD = "previousSibling"; 
var PLAY_ORDER_FORWARD = "nextSibling"; 

var currentPlayOrder = PLAY_ORDER_FORWARD; 

$(document).ready(function() { 
    $(".thumbs img").each(function(i, node) { 
     $(node).click(function() { 
      playVideo(this.getAttribute("rel"), this); 
     }); 
    }); 
}); 

var playVideo = function(source, thumbNode) { 
    console.log("Play video %s", source); 
    onVideoFinish(thumbNode); 
    // If your video play accepts a callback, you may need to pass it as 
    // function() { onVideoFinish(thumbNode); } 
} 

var onVideoFinish = function(thumbNode) { 
    // Get the next img node (if any) in the appropriate direction 
    while (thumbNode = thumbNode[currentPlayOrder]) { 
     if (thumbNode.tagName == "IMG") { break; } 
    } 

    // If an img node exists and it has the rel (video source) attribute 
    if (thumbNode && thumbNode.getAttribute("rel")) { 
     playVideo(thumbNode.getAttribute("rel"), thumbNode); 
    } 
    // Otherwise, assume that there are no more thumbs/videos in this direction 
    else { 
     console.log("No more videos to play"); 
    } 
} 
</script> 

희망을.

Answer 2

다음은 어떻게 수행할까요?

비디오 이름을 배열에 저장하는 대신 축소판과 함께 비디오 이름을 저장하지 않으시겠습니까? class 속성을 사용하여 동영상의 이름을 저장할 수 있습니다.

일단이 방법을 사용하면 모든 것이 간단 해집니다.

<div class="thumbs"> 
<img id="vt_0" src="thumbxxx00.jpg" class="xxx00"/> 
<img id="vt_1" src="thumbxxx01.jpg" class="xxx01"/> 
<img id="vt_2" src="thumbxxx02.jpg" class="xxx02"/> 
<img id="vt_3" src="thumbxxx03.jpg" class="xxx03"/> 
<img id="vt_4" src="thumbxxx04.jpg" class="xxx04"/> 
<img id="vt_5" src="thumbxxx05.jpg" class="xxx05"/> 
<img id="vt_6" src="thumbxxx06.jpg" class="xxx06"/> 
</div> 

<script type="text/javascript"> 

    function setupVideoPlayer(order) 
    { 
     //lastThumb won't be accessible from outside of setupVideoPlayer 
     //function. 
     var lastThumb = null; 
     var imageSelector = 'div.thumbs img'; 

     function playVideo(video) 
     { 
      //Play the video. 
      onVideoFinish(); 
     } 

     function onVideoFinish() 
     { 
      //If order is 'ascending', we will go to the 'next' 
      //image, otherwise we will go to 'previous' image. 
      var method = order == 'asc' ? 'next' : 'prev'; 

      //When user is at the end, we need to reset it either at the 
      //first image (for ascending) or the last (for descending). 
      var resetIndex = order == 'asc' ? 0 : $(imageSelector).length - 1; 

      //When video has finished playing, we will try to 
      //find the next/prev (depending upon order) sibling of 'lastThumb', 

      //If we can not find any sibling, it means we are at the 
      //last/first thumbnail and we will go back and fetch the first/last 
      //image. 

      //Also, instead of calling the playVideo method, we will 
      //fire the click event of thumbnail. This way, if you decide to 
      //do something in future (say playing an ad before the video) 
      //you only need to do it in your click handler.    

      if($(lastThumb)[method]().length == 0) 
       $(imageSelector).get(resetIndex).click(); 
      else 
       $(lastThumb)[method]().click(); 

     } 

     $j(imageSelector) 
      .click(
       function() 
       { 
        //on click, we store the reference to the thumbnail which was 
        //clicked. 
        lastThumb = this; 

        //We get the name of the video from the class attribute 
        //and play the video. 
        playVideo($(this).attr('class')); 
       } 
      ); 
    } 

    $(document).ready(
     function() { setupVideoPlayer('asc'); } 
    ); 

</script> 

위의 코드는 HTML을 수정할 수있는 장점이 있으며 자동으로 해당 비디오를 재생합니다.

Answer 3

당신은 앵커 태그로 이미지를 포장하고 다음과 같이 온 클릭 방법을 사용할 수 있습니다

<a href="java script:;" onClick="playVideo(0)"><img src="thumbxxx00.jpg" /></a> 
<a href="java script:;" onClick="playVideo(1)"><img src="thumbxxx01.jpg" /></a> 
...