1

我有一个项目列表，所有项目都有一个 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？这通常是怎么做的？

4

2 回答 2

4

使用 HTML5data属性：

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

您将受益于使用 jQuery 的.data()语法：

$('.listItem').eq(0).data('item-id'); // Returns: 4
于 2012-09-05T21:55:07.933 回答
0

您可以使用数据属性：

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

并使用 JS 在 JS 中恢复它们：（当您的选择器在 listItem 类上时）

...
var $this = $(this); //just an habit ;)
var id = $this.data('id');
var valueId = $this.data('valueId');
...
于 2012-09-05T21:59:32.510 回答