跟踪图像列表中的哪张图像被单击？

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