Итерирующий массив с jquery каждый

Question

У меня есть много видео каждый под слайдером. Когда воспроизводится определенное видео и пользователь щелкает другим слайдером, предыдущее видео должно прекратить воспроизведение. У меня есть код, который работает правильно.

$('#slidername1').on('hidden.bs.collapse', function() { 
    $('#video1').get(0).pause(); 
}) 
$('#slidername2').on('hidden.bs.collapse', function() { 
    $('#video2').get(0).pause(); 
}) 

и т.д. и т.п.

Теперь я хочу использовать массив для слайдеров и видео-х и перебирать с, например, jquery каждый. Я пробовал несколько вариантов, но до сих пор я не справлялся. Названия слайдера - это конкретные имена видео, чтобы они были распознаны. Любое рабочее решение?

Answer 1

Не использовать .each. Дайте всем ползункам класс, например. class="slider" и привязать к $(".slider").

Затем введите идентификатор соответствующего видео в атрибут data-XXX.

<div id="slidername1" class="slider" data-video="video1">...</div> 

Тогда JS может быть:

$(".slider").on('hidden.bs.collapse', function() { 
    $('#' + $(this).data('video')).get(0).pause(); 
}); 

Answer 2

Я думаю, что вы ищете один обработчик для всех ползунков, а индекс в скользящем идентификатор и идентификатор видео одинаковы в этом случае,

Одним из решений может быть, чтобы добавить общий класс (как slidername - потому что лучше, чем с помощью селектора префикса атрибута для id) для всех элементов слайдера

$('.slidername').on('hidden.bs.collapse', function() { 
    $('#video' + this.id.replace('slidername', '')).get(0).pause(); 
}) 

Answer 3

Спасибо за ответы, я также проверю их. Я нашел решение сам раньше:

var arr = [ "videoname1", "videoname2", "videoname3", "...", "..." ]; 

jQuery.each(arr, function(i, val) { 
    $('#' + val).on('hidden.bs.collapse', function() { 
    $('#video' + (i + 1)).get(0).pause(); 
}); 
});