Как получить индекс выбранного элемента списка воспроизведения

Question

Привет Создал список воспроизведения видео с паузой и кнопкой запуска для каждого видео. Все работает, кроме изменения изображения кнопки.

Как получить текущий видеоиндекс и перейти к playPauseImg [0] ???

Вот некоторые из моего кода:

<span> 
    <input type="image" class="playPauseImg" id="playPauseImg" img src="../../Icons/Play Button Green 24 x 24.png" onClick="playPauseSelect();"> 
    <a href="../../Bridesmaid's Entrance Ceremony Music/Angel - Jack Johnson.mp3"> 
     <p class="playlist_btn_text">AAngel - Jack johnson</p> 
    </a> 
<span/> 

var video_playlist = document.getElementById("video_player"); 
var links = video_playlist.getElementsByTagName('a'); 
for (var i = 0; i < links.length; i++) { 
    links[i].onclick = handler; 
}; 


function handler(e) { 
    e.preventDefault(); 
    videotarget = this.getAttribute("href"); 
    filename = videotarget.substr(0, videotarget.lastIndexOf('.')) || videotarget; 
    video = document.querySelector("#video_player video"); 
    source = document.querySelectorAll("#video_player video source"); 
    source[0].src = filename + ".mp3"; 
    video.load(); 
    video.play(); 
    playPauseImg[0].src = "../../Icons/Audio Stop Button 24 x 24.png"; 
} 

function playPauseSelect() { 
    if (video.paused) { 
     video.play(); 
     playPauseImg[0].src = "../../Icons/Audio Stop Button 24 x 24.png"; 
    } else { 
     video.pause(); 
     playPauseImg[0].src = "../../Icons/Play Button Green 24 x 24.png"; 
    } 
}; 

Answer 1

Я не могу комментировать еще не так, поэтому я ответить. Интересно, когда вы используете id #video_player, также неясно, где вы используете jquery, пожалуйста, сообщите нам, почему вы добавили тег jquery. Кроме того, вы не имеете в виду ваш код или что-то, что говорит нам, что может быть так называемым видеоиндектором.

Угадав, что ответ на ваш вопрос может быть, я бы сказал: - Найти видеоиндекс - Найти соотношение между видеоиндестом и playPauseImg. - проведите через него и установите некоторые условия и сохраните значения.

Answer 2

Что вам нужно, это clausure.

links[i].onclick = handler; 

должен быть изменен на

links[i].onclick = function(index){ 
    return function(evnt){ 
     handler.call(window,evnt,index); 
    } 
}(i); 

Теперь второй аргумент в обработчик получит индекс и изменить обработчик для поддержки индекса.