Question

将参数从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并按正则表达式解析
HTML5中的属性数据 - *属性
使用隐藏的子元素

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

第二个并不像第一个那么漂亮，但有效。所以妥协是......

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

Answer 1

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

<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。

Answer 2

您可以选择不同的方式，具体取决于您可能需要的参数数量。如果您只需要多个，则可以添加自定义属性，但这可能不符合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'
}

Answer 3

嵌套元素怎么样？

<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']");
    //...
});

Answer 4

这取决于背景。以最合适的语义方式表达数据。

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

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

Answer 5

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

e.g。

<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];
 // ...
}

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

编辑（预解决方案）

5 个答案:

修改