跟踪图像列表中的哪个图像被点击？

我有一组图像对应于视频缩略图。用户点击加载浏览器的拇指。这很简单，但我需要跟踪哪个拇指被点击了，这样我就可以顺序地自动提示下一个视频。跟踪图像列表中的哪个图像被点击？

我首先想到的是做这样的事情（高度简化的例子）：

<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>

乍一看，这似乎是不错，但我不知道这是否是最好的/最优雅的解决方案特别是因为我会在对象上下文中实现所有这些方法。

来源

2009-07-17 FilmJ

这是我会怎么做。在这种情况下，您唯一需要的全局是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>

希望有所帮助。

来源

2009-07-17 02:14:28

下面是我该怎么做。

为什么不将视频名称与缩略图一起存储，而不是将视频名称存储在数组中？您可以使用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，它会自动播放这些视频。

来源

2009-07-17 00:34:36 SolutionYogi

我也在想这个问题，唯一的问题是，我可能想以相反的顺序播放东西（在这种情况下，我会减少而不增加）。你不能真的在你身后寻找兄弟姐妹AFAIK，所以我想维护一个数组毕竟是更好的方法。 – FilmJ 2009-07-17 01:07:13

也有'prev'方法。所以你可以用它来反向排列。 – SolutionYogi 2009-07-17 01:14:15

-2

你可以用一个锚标记包裹的图像，并使用的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> 
...

来源

2009-07-17 00:35:03 ZeroConcept

跟踪图像列表中的哪个图像被点击？

回答

相关问题