尝试在 JS 中使用正则表达式的多个模式窗口 - Multiple Modal Windows trying to use regular expressions in JS

Multiple Modal Windows trying to use regular expressions in JS

本文关键字：模式窗口正则表达式 JS | 更新日期: 2023-09-27

伙计们，我对Javascript和正则表达式的使用不是很熟悉，我花了几个小时挖掘资源并尝试多种不同的方法，但似乎无法让它工作。

我有一个菜单，当您单击链接时，将弹出一个模态窗口。目前，我在一个页面上有 18 个这样的链接 - 所以有 18 个不同的模态窗口。我在 php 文件中标记了每个，如下所示：

<div class="button_menu">
    <a href="#dialog0" name="modal0" /><div class="button">HQ</div></a>
</div>

然后在PHP文件的底部，我有这个。

<div id="dialog0">
     (Omitted)
</div>
<div id="mask"></div>

这将从对话框 0 - 17 和模态 0 - 17 重复 18 次。

JS代码是我从教程中获得的简单jQuery模态代码：http://www.queness.com/post/77/simple-jquery-modal-window-tutorial

我无法使用正则表达式工作的代码在这里：

$('a[name=modal'.match(/[0-9]/)']').click(function(e) {
        //Cancel the link behavior
        e.preventDefault();
        //Get the A tag
        var id = $(this).attr('href');

而这里.....

    //if close button is clicked
    $('.X, #dialog'.match(/[0-9]/)).click(function (e) {
        //Cancel the link behavior
        e.preventDefault();
        $('#mask, #dialog'.match(/[0-9]/)).hide();
    });

我做错了什么？提前感谢您的帮助。

您可以在模态上使用数据属性将数据传递给模态打开函数或类，或部分匹配名称：下面是使用类触发事件的示例，您只需检索对话框的 ID 即可打开。

在这里摆弄

.HTML

    <div class="button_menu">
    <a href="#dialog0" name="modal0" class="open-dialog"/><div class="button">HQ</div></a>
</div>
<div class="button_menu">
    <a href="#dialog0" name="modal1" class="open-dialog"/><div class="button">HQ</div></a>
</div>
<div id="modal0" class="my-dialog">Dialog 1</div>
<div id="modal1" class="my-dialog">Dialog 1</div>

jQuery

   $(function(){
    //initialize all your dialogs at once
    $( ".my-dialog" ).dialog({ autoOpen: false });

    //bind to your open-dialog (added to your links) class
    $(".open-dialog").on("click", function(e,ui) {
        e.stopPropagation();
        e.preventDefault();
 var dialog_name = $(this).attr('name');
 $("#" + dialog_name).dialog("open");
});
})

使用 jQuery 选择器 $（"[name^='modal']"）。见 http://api.jquery.com/attribute-starts-with-selector/

在 HTML 中使用类和数据属性来定位标记。

<div class="button_menu">
    <a href="#dialog0" name="modal0" data-link=0 class="modalsLink" /><div class="button">HQ</div></a>
</div>

然后使用 jQuery：

$(".modalsLink").click(function () { 
        //Cancel the link behavior
        e.preventDefault();
        var modalNo = $(this).data("link");
        //Get the A tag
        var id = $(this).attr('href');
        //And do more stuff here.
});