jquery 选择器中的 id 冲突？

Question

我目前正在尝试使用 AJAX 和 jquery 编辑和更新 table。 table 结构将是 title linked 到许多 criteria 而他们 link 通过 title_id。但是，当我要在标题下添加新条件时，我发现 jquery select 或 select 共享相同 ID 的其他空白条件字段将保留关于空白字段的警报。有没有专门指出要添加的确切单元格？

(每个条件都有特定的数据属性指向相关标题，如下所示：)

行详细信息：

<tr><td rowspan="'.$rowspan.'" class="title" data-title-id="'.$titleID.'" 
contenteditable>'.$titleDesc.'</td>
<td id="criteriaDesc" data-title-id="'.$titleID.'" contenteditable></td>
<td><button type="btn_add" id="btn_add_crit" data-title-id="'.$titleID.'" class="btn btn-md btn-success" title="Add criteria">+</button></td></tr>

jquery代码：

        $(document).on('click','#btn_add_crit',function(){
        var criteria = $('#criteriaDesc').text();
        var titleID = $(this).data('title-id');
        if(criteria == '')
        {
            alert("The text is "+criteria);
            return false;
        }               

        $.ajax({
            url:"critInsert.php",
            method:"POST",
            data:{criteria:criteria,titleID:titleID},
            dataType:"text",
            success:function(data){
                alert(data);
                fetch_data();
            }
        })
    });

table:

已尽力解释我的问题并寻求帮助！

Answer 1

以下是如何从单元格中获取 criteriaDesc 值，对应于单击的“+”按钮。

$(".btn_add_crit").click(function() {
  console.log($($(this).parents()[1]).find(".criteriaDesc").text());
});

从上面的代码可以看出。您可以并且需要将您的重复 ID 更改为类。

首先您需要了解所有 ID 必须是唯一的。如果您忽略它，您的标记仍然可以正常加载，但代码将无法运行。 jQuery（以及其他 JS 库）和纯 JS 都不能 select 具有相同 ID 的第二个、第三个等等元素，因为他们几乎不相信，只能有一个。

其次。您应该多研究一下 jQuery 的工作原理。如果您有很多按钮和相应的文本字段，您不能只为所有这些字段编写 selector 并希望 select 编辑正确的一个。例如，在我的回答中，按钮和文本字段之间的连接是通过 parents() 函数实现的。

jquery 选择器中的 id 冲突？

Clashing of id in jquery selector?

ajax

jquery

selector