jQuery，在DOM中传递变量的最佳实践？

Question

我有一个类似于Facebook的“查看朋友”弹出窗口的DOM元素。 我有一个带有行列表的表，可以在其中向这些行添加标签：

<tr id="124"></tr>

单击该行时，会创建一个模式弹出窗口，让用户选择要与该行关联的标签，如下所示：

<div class="popup">
  <div class="popup-body-row" id="3434">Add tag 3434</div>
  <div class="popup-body-row" id="2112">Add tag 2112</div>
  //etc.
</div>

我有以下javascript：

    $('.popup-body-row').live('click', function(event) {
         var popupRowId = event.currentTarget.id
         // post for sending this to the server omitted
    });

这样就获得了popupRowId，但没有获得与popupRowId关联的原始元素。 我可以构建弹出窗口，以便将tr id与之关联：

<div class="popup" id="124">
// everything else is same as before
</div>

然后将此行添加到我的javascript中：

var trRowId = e.currentTarget.parentNode.id;

那行得通，但是如果我开始将元素添加到弹出div中，以使父节点不再是父节点，它将中断，我将不得不重写它。

任何建议都将不胜感激，但是我的做法有一定的“代码味道”。 谢谢！

编辑： 简短版本 ，我有一个row元素，每个元素都与一个唯一的对象相关联。 我将对象的ID作为属性。 当我单击该行元素时，将创建一个（可能）复杂的DOM元素，使用户可以选择要与该行元素相关联的标签。 如果我使用“ parentNode”来查找单击了哪一行，那么如果我的设计师来了，它将中断，并向弹出窗口添加元素。 什么是最好的解决方案？ 将tr行ID与“ popup”类相关联，然后在添加标签后在整个DOM中搜索该类？ 还是将tr id放在弹出窗口中的所有div元素上，这样即使我的设计师添加了新的父对象，id也会传播给它吗？

Answer 1

我认为将被点击的行的id添加到弹出窗口没有错。 但是您不能将其存储在id属性中，因为它们应该是唯一的。 而是使用HTML5的数据属性，该属性也可以与旧版浏览器完美配合。

如果您担心popup div的重组，则不必显式依赖parentNode关系，而要依赖于popup类（例如，在popup中必须唯一以消除歧义）或特定的属性，其中必须仅存在于根弹出节点上。

这是我建议的事件流：

1. 用户单击id =“ 124”的表行
2. 显示弹出窗口并在那里记录ID- <div class="popup" data-current-row="124">..
3. 单击弹出窗口中的一行时，然后找到具有属性data-current-row的最接近的父data-current-row并获取其值。

将弹出实时单击处理程序设置为：

$('.popup-body-row').live('click', function() {
    // by searching for closest popup, you break the 
    // explicit parentNode relationship. By storing the data
    // inside an HTML5 data attribute, you are not duplicating id's.
    // Basically, a win-win situation for all.
    var popup = $(this).closest('[data-current-row]');
    var associatedRowId = popup.attr('data-current-row');
});

Answer 2

我不确定您到底遇到了什么麻烦，但至少可以使用jQuery功能获取ID：

$('.popup-body-row').live('click', function(event) {
     var popupRowId = $(this).attr('id');
     var trRowId = $(this).parent().attr('id');
});

Answer 3

你可以尝试这样的事情：

$(document).delegate('.popup-body-row', 'click', function(e) {
    var
        me = $(this),
        id = me.attr('id'),
        rowId = me.closest('tr').attr('id');

    // Do something with them
});