Question

我有一个项目列表，都有id和值。我使用div在php视图脚本中打印此列表，如下所示：

<div class="myList">
    <div class="listItem item3 value4">item label</div>
    <div class="listItem item5 value7">item label</div>
    ...
</div>

这个想法是包含一些jQuery来将一些编辑功能附加到列表项。为了操作每个项目，我需要jQuery中的项目ID和值ID，我现在通过查找类模式itemID和valueID并提取ID部分来确定（当然这是每个项目的编号。这些ID然后用于执行ajax调用以更新列表中的正确项目（为其提供用户可以选择的新值ID）

我的问题：我这样做的方式有效，但对我来说似乎并不太优雅。 jQuery .data方法似乎没有帮助，在jQuery发挥作用之前，需要通过php视图脚本打印数据，因此数据需要存在于html结构中，然后由jQuery读取。我想到了自定义html属性

<div class="listItem" itemID="4" valueID="7">labeltext</div>

但这是好习惯吗？有没有更好的方法将数据“提供”给jQuery？这通常是怎么做的？

Answer 1

使用HTML5 data attributes：

<div class="listItem" data-item-id="4" data-value-id="7">labeltext</div>

您可以使用jQuery的.data() syntax：

$('.listItem').eq(0).data('item-id'); // Returns: 4

Answer 2

您可以使用数据属性：

<div class="listItem"
     data-id="4"
     data-valueId="7">
       labelText
</div>

使用以下方法在JS中恢复它们：（当你的选择器在listItem类上时）

...
var $this = $(this); //just an habit ;)
var id = $this.data('id');
var valueId = $this.data('valueId');
...

如何将数据附加到DOM元素以供jQuery使用

2 个答案: