Question

我想知道如何缩短此代码，以免重复。我尝试了一个带有ID的数组，但它没有用。

下面是代码：

/* Autoplays the videos on open */

$('#modal-video1').on('shown.bs.modal', function () {
    $(this).find('video')[0].play();
})

$('#modal-video2').on('shown.bs.modal', function () {
    $(this).find('video')[0].play();
})

$('#modal-video3').on('shown.bs.modal', function () {
    $(this).find('video')[0].play();
})

/* Stops and resets the videos on close */

$('#modal-video1').modal({
    show: false
}).on('hidden.bs.modal', function(){
    $(this).find('video')[0].pause();
    $(this).find('video')[0].load();
});

$('#modal-video2').modal({
    show: false
}).on('hidden.bs.modal', function(){
    $(this).find('video')[0].pause();
    $(this).find('video')[0].load();
});

$('#modal-video3').modal({
    show: false
}).on('hidden.bs.modal', function(){
    $(this).find('video')[0].pause();
    $(this).find('video')[0].load();
});

提前致谢！

Answer 1

你可以用逗号分隔jQuery中的选择器。此外，您可以链接您的函数，并且可以将查询结果存储在变量中，而不是重复代码：

$('#modal-video1, #modal-video2, #modal-video3').modal({
    show: false
})

/* Plays the video on open */
.on('shown.bs.modal', function () {
    $(this).find('video')[0].play();
})

/* Stops and resets the videos on close */
.on('hidden.bs.modal', function() {
    var video = $(this).find('video')[0];
    video.pause();
    video.load();
});

Answer 2

对于代码的第一部分，您可以执行以下操作 bind会改变这个

的上下文

＆＃13;

$('#modal-video1').on('shown.bs.modal',play.bind(this))

$('#modal-video2').on('shown.bs.modal',play.bind(this))

$('#modal-video3').on('shown.bs.modal',play.bind(this))

function play(){
 $(this).find('video')[0].play();
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

Answer 3

使用多重选择器 - 有关详细信息，请参阅Multiple Selector in jQuery。您的代码将如下所示：

$('#modal-video1, #modal-video2, #modal-video3').on('shown.bs.modal', function () {
    $(this).find('video')[0].play();
});

$('#modal-video1, #modal-video2, #modal-video3').modal({
    show: false
}).on('hidden.bs.modal', function(){
    var video = $(this).find('video')[0];
    video.pause();
    video.load();
});

如何缩短重复的jQuery？

3 个答案: