Отслеживание, какое изображение в списке изображений нажимается?

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

Вы можете обернуть изображения тегом привязки и использовать метод 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>
...

Answer 3

Вот как бы я это сделал.

Вместо того, чтобы хранить имена видео внутри массива, почему бы не сохранить имя видео вместе с миниатюрой? Вы можете использовать атрибут класса для хранения названия видео.

Как только вы выберете этот подход, все станет просто.

<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, и он будет автоматически воспроизводить эти видео.