Question

我有地址的div-box，每个地址都有自己的按钮，按钮应打开一个对话框，您可以在其中编辑某个地址。

按钮ID始终为edit_address_（number），该编号是数据库的ID。所以数字不是1,2,3但可能是12,35,122，显示的对话框有ids对话框 - form_（数字）。

那么如何才能首先获得现有ID的所有结束编号，然后为其创建循环

$( "#dialog-form_$i" ).dialog({
    autoOpen: false,
    height: 300,
    width: 390,
    modal: true
    });

$('#edit_address_$i').button().click(function() {
    $('#dialog-form_$i').dialog('open');
});

我知道这段代码不起作用，但如何实现呢？

Answer 1

对于id以“edit_address_”开头的每个元素，绑定一个click事件，它将通过提取您正在讨论的实际数据库ID打开相应的对话框。

$("[id^='edit_address_']").click(function() {
    var id = this.id.split('_')[2];
    $('#dialog-form_' + id).dialog('open');
}).button();

注意：根据元素的类型，您可以在初始选择器前加上标记名，以便更快。例如："input[id^='edit_address_']"或"button[id^='edit_address_']"

Answer 2

由于ID是动态生成的，因此为所有控件添加公共类名称会更加简单，例如＆＃34; edit_address＆＃34;那么选择器就是类名。为您需要使用的唯一标识符添加另一个简单的数据属性，如数字ID，然后最小化解析属性的需要

<button id="edit_address_$i" class="edit_address" data-id="$i">Text</button>

$('.edit_address').click(function(){
    $('#dialog-form_' + $(this).data('id') ).dialog('open');
})

Answer 3

使用jQuery的attribute selector：

$("input[id^='edit_address_']").each(function() {
    $( "#" + this.id ).dialog({
         autoOpen: false,
         height: 300,
         width: 390,
         modal: true
    });
});

$("input[id^='edit_address_']").click(function() {
    $('#dialog-form_$i').dialog('open');
});

以下是属性选择器运算符的快速概述：

=  is exactly equal
!= is not equal
^= starts with
$= ends with
*= contains

使用jQuery获取具有类似ID的元素

3 个答案: