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添加元素以使父节点不再是父节点，它就会中断，我将不得不重写它。

任何建议都会受到赞赏，但我这样做的方式有一定的“代码味道”。谢谢！

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

Answer 1

我认为将点击的行的id添加到弹出窗口没有任何问题。但是你不能将它存储在id属性中，因为它们应该是唯一的。而是使用HTML5的数据属性，它们也适用于旧浏览器。

如果您担心popup div的重组，那么不要明确依赖parentNode关系，而是依赖于popup类（必须在消除歧义的弹出窗口中是唯一的，或者特定的属性，必须只存在于根弹出节点上。

以下是我提议的事件流程：

用户点击ID =“124”
显示弹出窗口并在其中记录ID - <div class="popup" data-current-row="124">..
单击弹出窗口中的行时，找到具有属性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
});

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

3 个答案: