Как реализовать чтоб скрипт применялся по id?

Question

[WebforSelf]

Есть скрипт,

$('.video_btn').hover(function() {
	
    $(this).next().show(); 
	$('#vidos').trigger('play');
	$("#vidos").prop('muted', false);
}, 
function() {
    $(this).next().hide();
	$('#vidos').trigger('pause');
});

При наведении на кнопку , открывается блок и воспроизводится видео.
а что если будет 5 блоков товара ( список)

получается что кнопке и id с видео присвоил id товара

.video_btn-1
#vidos-1

.video_btn-2
#vidos-2

и т.д. А как реализовать чтоб в скрипте он брал id ? и обрабатывал именно тот блок.

Получается что hide show работают нормально, т.к. он берет следующий элемент, а вот видео запускается и на паузу ставится только первое.

Может как то через data атрибуты?

Comments

[Ankhena]

. А как реализовать чтоб в скрипте он брал id ? и обрабатывал именно тот блок.

В скрипте он и так берет id
$('#vidos')

Вам надо связать 2 id, на мой взгляд удобнее через data-. Т.е. получить data- у той кнопки на которую кликнули, получить по data айдишник и к нему применять trigger('play') и т.д.

[WebforSelf]

Ankhena,

Можете пример набросать с data ?

[Евгений]

WebforSelf, data-id например

[WebforSelf]

Евгений, присвоил дата id

$('.video_btn').hover(function() {
	
    $(this).next().show(); 
	$(this).data('id').trigger('play');
	$($(this).data('id')).prop('muted', false);
}, 
function() {
    $(this).next().hide();
	$(this).data('id').trigger('pause');
})

на кнопку data-id="vidos-1"
на блок видео
id="vidos-1"

[WebforSelf]

не хочет работать, запускать видео.

[Ankhena]

типа того, я забыла как это на JQ точно пишется

videoId = "#" + $(this).data('id');
$(videoId ).trigger('play');

[WebforSelf]

Ankhena, Спасибо, play работает, а вот при попытке включить звук, почему то и play перестает работать.

videoId = "#" + $(this).data('id');
    $(videoId ).trigger('play');
    $(videoId ).prop('muted', false);

третья строка