Bootstrap 4 模态视频上的 jQuery - 使代码干燥

Question

我在一页上有几个视频。它们都在 Bootstrap 4 模态中，所以我必须找到一些代码，让每个视频都显示自动播放后模态。 （如果我一次选择所有视频，它们会同时播放和暂停。） 结果，我生成了一些漂亮的 WET 代码。

我想让这个干燥：

// Makes video1 play after modal is shown and pause video when the modal is closed
$('#video1').on('shown.bs.modal', function() {
  $('#autoplay-video1')[0].play();
})
$('#video1').on('hidden.bs.modal', function() {
  $('#autoplay-video1')[0].pause();
})

// video 2
$('#video2').on('shown.bs.modal', function() {
  $('#autoplay-video2')[0].play();
})
$('#video2').on('hidden.bs.modal', function() {
  $('#autoplay-video2')[0].pause();
})

// video 3
$('#video3').on('shown.bs.modal', function() {
  $('#autoplay-video3')[0].play();
})
$('#video3').on('hidden.bs.modal', function() {
  $('#autoplay-video3')[0].pause();
})

// video 4 ... (etc.)

Answer 1

使用“begin with”选择器可能对您有用：

$('[id^=video]').on('shown.bs.modal', function() {
  $('#autoplay-' + $(this).attr('id'))[0].play();
})
$('[id^=video]').on('hidden.bs.modal', function() {
  $('#autoplay-' + $(this).attr('id'))[0].pause();
})

但如果你有其他元素的 id 以“video”开头，这可能会中断，如下所示：

<div id="video-wrapper">…</div>

因此我建议使用自定义数据属性来避免这些问题：

<video data-video="1">…</video>

$('[data-video]').on('shown.bs.modal', function() {
  $('#autoplay-video' + $(this).attr('data-video'))[0].play();
})
$('[data-video]').on('hidden.bs.modal', function() {
  $('#autoplay-video' + $(this).attr('data-video'))[0].pause();
})