jquery 一种打开不同模式弹出窗口的功能

3vpjnl9f  于 2023-03-22  发布在  jQuery
关注(0)|答案(1)|浏览(123)

我有一个函数来打开一个模态弹出窗口

const videoModal = $('#videoModal');

$('.modal-btn').on('click', event => {
    const button = event.target.closest('.modal-btn');
    const link = $(button).data('video');

    openModal(link);
});

function openModal(link) {
    videoModal.modal('show');
    $('#video iframe').attr('src', link);
}

然后我需要添加另一个模态弹出窗口,有不同的样式和按钮,但打开功能是相同的,所以我添加了代码

const videoModalSs = $('#videoModalSs');

$('.modal-btn-ss').on('click', event => {
    const buttonSs = event.target.closest('.modal-btn-ss');
    const linkSs = $(buttonSs).data('video');

    openModalSs(linkSs);
});

function openModalSs(linkSs) {
    videoModalSs.modal('show');
    $('#video iframe').attr('src', linkSs);
}

但实际上,这里所有的代码都是一样的,唯一不同的是变量和函数的名称
问题是,是否有可能使此功能适用于两个模态弹出窗口,同时不重复其代码2次?

jchrr9hc

jchrr9hc1#

您将事件侦听器设置在一个循环中,该循环仅迭代发生更改的部分。

for (const [btnClass, modalId] of [['.modal-btn', '#videoModal'], ['.modal-btn-ss', '#videoModalSs']]) {
    const videoModal = $(modalId);
    $(btnClass).click(event => {
        const button = event.target.closest(btnClass);
        const link = $(button).data('video');
        videoModal.modal('show');
        $('#video iframe').attr('src', link);
    });
}

相关问题