jquery - 使用不属于的属性 (HTML)

Question

假设我有一个这样的表：

<table>
<tr>
<td>My House </td>
<td>My Car </td>
</tr>
</table>

并且使用 jquery，如果您单击其中一个，我希望它显示该项目的值。是否可以将附加信息存储在属性value中，例如，然后使用.attr()

Answer 1

jQuery.data()用于应用数据。还有一个data-xxxx用于存储数据同时保持 HTML 有效的属性。无论哪种方法更适合您！

Answer 2

只要您有 HTML5 Doctype，页面仍然会验证并且您可以使用data-属性。请参阅jQuery 数据和数据属性。

所以有了这个标记：

<table id="data-table">
    <tr>
        <td data-value="house">My House </td>
        <td data-value="car">My Car </td>
    </tr>
</table>

像这样的东西：

$(function(){
    $('#data-table').on('click', 'td', function(){
        var val = $(this).data('value');
    });
});

Answer 3

当然，你可以用这种方式做很多事情。

Answer 4

您可以这样做，尽管最佳实践是使用一些特定的属性名称，rel或者（甚至更好）使用data属性。

使用示例rel：

<td rel="123">My House</td>

使用示例data（对 JQuery 更友好）：

<td data-value="123">My House</td>

对于最后一个示例，attr您可以使用以下命令，而不是使用 JQuery 的函数检索值：

$(elem).data("value")

还要设置您所做的值：

$(elem).data("value", "new_value")

您可以在同一个元素中拥有多个数据属性。