Question

伙计们我对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>

这将从dialog0 - 17和modal0 - 17重复18次。

JS代码是一个简单的jQuery Modal代码，我从以下教程中获取：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();
    });

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

Answer 1

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

Answer 2

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

Fiddle here

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");
});
})

Answer 3

使用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.

});

多个模态Windows尝试在JS中使用正则表达式

3 个答案: