jQuery on Bootstrap 4模态视频-使代码DRY

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元素，比如，这可能会破坏

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