跟蹤圖像列表中的哪個圖像被點擊？

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屬性中。我假設你的應用程序正在生成縮略圖，在這種情況下，這將是一個合適的方法，因爲無論生成縮略圖，HTML都可以讓相關視頻源知道。

<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

你可以用一個錨標記包裹的圖像，並使用的onClick方法如下：

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