javascript - 动态 ID/动态函数/Jquery 对话框

Question

我有以下动态创建的 html。

<a class="open"></a>
<div class="dialog"></div>
<a class="open"></a>
<div class="dialog"></div>
<a class="open"></a>
<div class="dialog"></div>
<a class="open"></a>
<div class="dialog"></div>

使用下面的 jquery，我为每个 a 以及每个 div 分配 ID

$('a.open').prop('id', function(i){
return '' + (i + 1);
});
$('div.dialog').prop('id', function(i){
return 'dialog' + (i + 1);
});

然后我使用分配的 ID 触发 jquery ui 对话框弹出窗口，但是，我不得不重写下面的函数 x 次。有没有办法创建下面的函数，这样我就不必重写 x 次了。 (x 是 div 可能出现在页面上的最大次数)。

$("#1").click(function(){
   $("#dialog1").dialog("open");
});

Answer 1

听起来像是数据属性的理想用途。当您动态生成 <a>标签，为它们分配一个数据属性，如下所示:

<a class="open" data-openNumber="1"></a>

(当然，您也可以通过 jQuery 执行此操作)。

然后您所要做的就是编写一个单击处理程序:

$('body').on( 'click', '.open', function(){
    var num = $(this).data('openNumber');
    $('#dialog'+num).dialog( 'open' );
});

请注意，我没有将处理程序直接附加到具有类 open 的元素;如果我这样做，每次动态创建元素时我都必须这样做。相反，我将处理程序附加到主体，并按类 open 过滤它;这样我就不必一直重新声明该点击处理程序。如果你有一个更方便的封闭类，你可以使用它而不是 body ，但不知道你的页面结构，我不知道那个元素是什么，所以我只用了 body .

我制作了一个 jsFiddle 来演示这个概念。希望对您有所帮助:

http://jsfiddle.net/Jammerwoch/Z9U67/