javascript - JQuery 根据文件名加载文件

Question

我创建了一个简单的处理程序来将包含视频的 iframe 打开到模式中。现在 2 个页面有 2 个视频。我想重用该函数，以便可以根据文件名加载任何文件。我知道它的语法很简单，只是不确定它是什么。

链接:

<a href="#" data-toggle="modal" data-target="#videoPopup" class="modal-link">`

功能:

$('.desktop-cta-mod .modal-link').on('click', function () {
    $('#videoPopup .modal-content').load('Content/video.html', function () {
        //bind closers
        $('.modal-backdrop, .modal-content button').off().on('click', function () {
            $('#videoPopup .modal-content').empty();
            $('.modal-backdrop').remove();
        });
    })
});

Answer 1

您可以将 2 个不同的页面/URL 作为链接标记的数据属性，并在单击时从当前单击的项目中读取。

<a href="#" data-toggle="modal" data-target="#videoPopup" 
                                   data-videourl="Content/video.html" class="modal-link">
<a href="#" data-toggle="modal" data-target="#videoPopup"
                                   data-videourl="Content/video2.html" class="modal-link">

你的 JavaScript 将会是

$('.desktop-cta-mod .modal-link').on('click', function () {
    var url=$(this).data("videourl");
    $('#videoPopup .modal-content').load(url, function () {
        //bind closers
        $('.modal-backdrop, .modal-content button').off().on('click', function () {
            $('#videoPopup .modal-content').empty();
            $('.modal-backdrop').remove();
        });
    })
});

只需确保正确呈现 url 值即可。如果 Content 目录位于根级别，您可以使用 /Content/Video.html