Закрытие нескольких модалов с помощью одного кода jquery

Я делаю веб-сайт, в котором есть около 20 модалов (bootstrap) на одной странице. Каждый модальный содержит iframe, который воспроизводит видео youtube.

До сих пор все, что я сделал, было создано все 20 модалов с div #myModal1, #myModal2 ……….. #myModal20.

Затем я искал код javascript, который может остановить видео youtube, когда я закрываю модальный и нашел код jquery (показано ниже)

jQuery(".modal-backdrop, #myModal2 .close, #myModal2 .btn").on("click", function() {
        jQuery("#myModal2 iframe").attr("src", jQuery("#myModal2 iframe").attr("src"));
});

Приведенный выше код останавливает видео youtube, когда я закрываю модальное с div #myModal2.

Теперь, так как есть 20 модалов, и я написал тот же код для всех из них, просто меняя #myModal3, #myModal4,………..и так далее.

Могу ли я сделать то же самое с помощью for loop (я новичок в этом javascript), но я попробовал что-то, и это не работает.

Код, который я написал был:

for(i=1; i<21; i++) {

var modal = "#myModal"+i;

jQuery(".modal-backdrop, " + modal +" .close, " + modal +".btn").on("click", function() {
    jQuery(modal+" iframe").attr("src", jQuery(modal+" iframe").attr("src"));
});

}

Это не работает.

2 ответа

  1. По существу, вам не нужен цикл for для этого, просто привязать обработчик щелчка, к [id*='myModal']которому все элементы, имеющие id, начиная сmyModal

    jQuery("[id*='myModal'] .close, [id*='myModal'] .btn").on("click", function() {
            var that = this;
            jQuery(that).find("iframe").attr("src", jQuery(that).find("iframe").attr("src"));
    });
    

    И теперь нажав на фоне должны остановить все видео

    jQuery(".modal-backdrop").on("click", function() {
                jQuery([id*='myModal']).find("iframe").attr("src", jQuery([id*='myModal']).find("iframe").attr("src"));
    });
    

    Почему ваш код не работает, потому что значение iпостоянно меняется и не сохраняется в обработчике кликов.

    Чтобы заставить его работать, вы должны использовать IIFE .

  2. Я немного изменил свой код, определив немедленно вызванное выражение функции IIFE .

    I had the jquery to stop the youtube video on clicking close button and just needed to input a variable which will work for all the modals so I added [id^= ‘ myModal] to the input that is i which the function takes to execute the code.

    (function(i) {
    
        //Defining a variable "modal" equating it to "[id^='myModal']"
        //'i' will be any modal having id starting with **myModal**
        var modal = i;
    
        //Jquery to stop the youtube video 
        jQuery(".modal-backdrop, " + modal +" .close, " + modal +".btn").on("click", function() {
        jQuery(modal+" iframe").attr("src", jQuery(modal+" iframe").attr("src"));
    });
    }
    ("[id^='myModal']"));