将变量附加到 HTML 元素？答案

【问题标题】：Attach a variable to an HTML element?将变量附加到 HTML 元素？
【发布时间】：2013-07-17 21:16:22
【问题描述】：

我发现很多情况下我想将变量附加到 div 或另一个 HTML 元素。例如，我有一个 div 用作对话框窗口来编辑表格中的一行 - 如下所示：

    <div class='dialog' id='editTableLineDialog'/>

当此对话框打开时，我需要在我正在编辑的表中记录行的 id。在过去，我创建了名为 lineCurrentlyEditting 的全局变量（糟糕！），或者我将 id 嵌入到实际的表 id 中，如下所示：

    <div class='dialog' id='editTableLineDialog_43'/>

这两种解决方案都不是很优雅。我希望能够将变量添加到 div，如下所示：

    var dialog = document.getElementById('editTableLineDialog');
    dialog.tableLineId = 43;

或

    $('#editTableLineDialog').tableLineId = 43;

或

    <div meta='{tableLineId=43}' class='dialog' id='editTableLineDialog'/>

有没有办法做这样的事情？处理这种情况的最佳方法是什么？ JQuery有解决办法吗？

【问题讨论】：

你使用的是jQuery，所以使用.data():$('editTableLineDialog').data('tableLineId', 43);
您的第一个灵魂dialog.tableLineId = 43; 可以正常工作，而且非常快速高效。我可能不会存储大型对象，但数字等很好。
检查这个答案。您可以添加为属性。我不知道它是否可以处理更高级的东西。 Link
我会使用非属性属性，例如 tableLineId。这将比设置像 dataset.x、className、title 或 id 这样的 dom 反射属性快得多。除非您需要将值保留在已保存的标记中，否则属性会浪费 CPU 和 RAM。

【解决方案1】：

您可以使用数据属性。

<div data-tableLineId='43' class='dialog' id='editTableLineDialog'/>

$.data('#editTableLineDialog', 'tableLineId','43');

【讨论】：

【解决方案2】：

通常的做法是将类似的值存储在所谓的“隐藏字段”中。假设对话框与表格在同一页面中，您很可能只有这样的内容：

<input type="hidden" id="tableRowEdited" value="43">

它不会呈现给用户，但你可以通过 jQuery 引用它：

$("#tableRowEdited").val()

【讨论】：