繰り返しjQueryを短縮するには？

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

ありがとう！詳細についてはMultiple Selector in jQueryを参照してください - あなたは、次の バインドとして行うことができ、コードの最初の部分については

Answer 1

のコンテキストを変更します。あなたのコードは次のようになります：

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

Answer 2

は、複数のセレクタを使用して、この

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

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

Answer 3

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