0

我敢肯定我们以前都这样做过：

<a id="232" rel="link_to_user" name="user_details" class="list hoverable clickable selectable">
USER #232
</a>

但后来我们说，哦，天哪，我需要更多方法来存储有关此 div 的跟踪信息！

<a id="232-343-22" rel="link_to_user:fotomeshed" name="user_details" class="groupcolor-45 elements-698 list hoverable clickable selectable">
User: John Doe
</a>

并且疾病不断增长。我们只是继续将它包装在那个可怜的小元素和它的属性中。所有这些都是为了让我们可以跟踪它是谁。

因此，由于我对 JS 的了解有限，请有人告诉我如何做这样的事情：

<a id="33">USER #33</a>

$(#33).attr({title:'User Record','username':'john', 'group_color':'green', 'element_num':78});

所以在这里我们只是添加了我所说的隐形属性，因为我们只是扮演上帝，并在飞行中创造了这些属性，就像没问题一样。最酷的部分是这些将被保存在他们自己的小物体中，位于可变土地的某个地方。不在标签本身中。

然后稍后，在一个嵌套很远的代码中，可以说，哦，我想知道 John 是什么 group_color ......

user_group_color = $(table).find(a['username':'john']).attr('group_color');

然后砰！！！！战俘！！！！

alert(user_group_color + " is a bitchin color!");

您可以了解他的组颜色...所有这些都无需在我们的标签中添加一堆臃肿的元素跟踪废话。

那么这种东西存在吗？如果没有，我该怎么做？

4

2 回答 2

3

您可以.data()仅用于此目的:)，如下所示：

$("#33").data({title:'User Record','username':'john', 'group_color':'green', 'element_num':78});

注意：ID 不能以数字开头，忽略它以匹配您的示例！

并获得价值：

user_group_color = $('table').find('a').data('group_color');

如果您仍然需要通过用户名查找，请使用.filter()如下方式：

user_group_color = $('table').find('a').filter(function() {
  return $(this).data('username') === 'john';
}).data('group_color');

不是直接回答这个问题，但可能会节省时间。您也可以将其设为选择器，如下所示：

jQuery.expr[":"].username = function(a, b, m) {
  return jQuery(a).data('username') == m[3];
};

然后通过用户名获取元素如下所示：

user_group_color = $('table').find('a:username(john)').data('group_color');

您会看到该模式，只需将其用于您需要过滤的任何常用属性。

于 2010-04-16T20:37:35.747 回答
0

如果您出于某种原因不想jQuery.data按照其他人的建议使用，那么您没有理由不能通过 ID（或任何其他属性）将数据与您的元素相关联。例如：

HTML：

<span id='foo1'>blah blah blah</span>
<span id='foo2'>blah blah blah</span>

Javascript：

var elementData = {
    foo1: {
       x: 1,
       y: 2
    },
    foo2: {
       x: 3,
       y: 4
    },
};

用法：

var foo = /* ...get one of the `fooX` elements ... */;
var fooData = elementData[foo.attr('id')];
alert(fooData.x); // alerts 1 or 3 depending on which `foo` you have

即时添加新数据：

elementData[newID] = {
   x: 42,
   y: 73
};

即时更改数据：

elementData[theID].x = 27;
于 2010-04-16T21:00:32.820 回答