将参数和值从 HTML 传递到 jQuery（事件）答案

【问题标题】：Passing arguments and values from HTML to jQuery (events)将参数和值从 HTML 传递到 jQuery（事件）
【发布时间】：2011-02-23 16:56:08
【问题描述】：

将参数从 HTML 传递到 jQuery 事件函数的做法是什么。例如从 db 中获取行的 id：

<tr class="jq_killMe" id="thisItemId-id">
 ...
</tr>

和 jQuery：

$(".jq_killMe").click(function () {
     var tmp = $(this).attr('id).split("-");
     var id = tmp[0]
     // ...
}

如果我想传递多个参数，最好的做法是什么？不使用jQuery会更好吗？例如：

<tr onclick="killMe('id')">
 ...
</tr>

我没有找到我的问题的答案，即使有链接我也会很高兴。谢谢。

编辑（预解决方案）

所以你建议了两种方法来做到这一点：

向元素添加自定义属性 (XHTML)
使用属性ID并用正则解析
属性 data-* HTML5 中的属性
使用隐藏的子元素

我喜欢第一个解决方案，但是...我想（我必须（雇主））生成有效代码。这是一个很好的问题和答案：
So what if custom HTML attributes aren't valid XHTML?

第二个不如第一个漂亮，但有效。所以妥协是……

第三个是未来的解决方案，但这里有很多 CMS，我们必须使用 XHTML 或 HTML4。（而 HTML5 是一个漫长的过程）

【问题讨论】：

标签： jquery html events arguments

【解决方案1】：

这取决于上下文。以最合适的语义方式表达数据。

它可能使用一个类。它可能会使用行内单元格中的数据。它可能会使用单元格中元素的属性中的数据（例如，锚点的 href 中的 URI）。

没有一个通用的解决方案总是最好的。

【讨论】：

【解决方案2】：

最简单的方法是将信息放入自定义属性中，如下所示：

<tr class="jq_killMe" id="thisItemId-id" itemId="42" itemName="Answer">
 ...
</tr>

$(".jq_killMe").click(function () {
     var id = $(this).attr('itemId');
     var name = $(this).attr('itemName');
     // ...
}

记得正确转义值，以防止 XSS。

【讨论】：

您应该提到自定义属性不一定是跨浏览器兼容的，也不适用于标准严格 dtd
现在所有的浏览器都可能支持它，只要 xhtml 被支持并且可用。无论如何，我不太确定 W3C 和自定义属性。
XHTML 在 IE

【解决方案3】：

您可以根据需要的参数数量在不同的方式之间进行选择。如果您只需要多个，您可以添加自定义属性，但这可能不符合 html。

有时您甚至可能需要像现在这样在 id 中嵌入值：

<tr class="jq_killMe" id="thisItemId-id">

但我会这样做：

<tr class="jq_killMe" id="thisItemId1">

其中 1 是您的 id，然后使用 RegEx 而不是进行拆分：

$(".jq_killMe").click(function () {
     var fullid= $(this).attr('id);
     // do Regex here to either replace or match anything that follows 'thisItemId'
}

【讨论】：

【解决方案4】：

那么嵌套元素呢？

<style type="text/css">
  .data {display: none}
</style>

<tr class="jq_killMe">
   <span id="data-id" class="data">my id</span>
   <span id="data-name" class="data">answer</span>
   ...
</tr>

但是有一些问题：

这样的可访问性安全吗？
有多少百分比的用户禁用了 CSS？

编辑

更好的方法是使用<input type="hidden" />

<tr class="jq_killMe">
   <input type="hidden" name="data-id" value="my id" />
   <input type="hidden" name="data-name" value="answer" />
   ...
</tr>

而 jQuery 看起来是这样的

$(".jq_killMe").click(function() {
    var id = $(this).children("input[name='data-id']");
    //...
});

【讨论】：

【解决方案5】：

另一种选择是通过脚本提供数据，然后使用 row-id 进行查找。

例如

<script>
 var MyData = {
  table: [
   { name: "John", age: 20 },
   { name: "Jane", age: 40 }
  ]
 }
</script>

然后使用以下内容查找数据：

$(".jq_killMe").click(function () {
 var tmp = $(this).attr('id').split("-");
 var id = tmp[0];
 var data = MyData.table[id];
 // ...
}

【讨论】：