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

您可以将这两个不同的页面/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