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

Question

我在一页上有几个视频。它们全都处于Bootstrap 4模态中，因此我必须找到一些代码，以使每个视频作品都能显示出模后自动播放。 （如果我一次选择所有视频，它们将同时播放和暂停。）结果，我产生了一些漂亮的WET代码。

我想做这个DRY：

// 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

使用“开头为”选择器可能对您有用：

$('[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以“视频”开头，则可能会中断，例如：

<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();
})