jQuery - 循环数据选项

Question

我正在使用jQuery的.data()方法在锚标记上存储一些额外的数据。

<a href="/someurl/" class="someLink" data-options="{'checkout_authentication':'create_account', 'foo':'bar'}">Link</a>

我通过给出的示例看到我可以像这样访问数据属性：

$("a.someLink").data("options").foo

其中“foo”是其中一个键的名称。这很好用，但我不会总是知道存在哪些数据属性，因此我无法专门调用它们。我想不指定名称，只获取data-options属性的全部内容并循环遍历每个键以构建查询字符串。

我尝试过以下内容：

var dataOptions = $(this).data('options');

for(var index in dataOptions) {
    console.log(index,dataOptions[index]);
};

但是输出了以下内容：

Answer 1

将您的HTML更改为：

<a
  href="/someurl/"
  class="someLink"
  data-options='{"foo":"barski", "bar":"fooski"}'
>Link</a>​​​​​​​​​​​​​​​​​​​​​​​​​​

请注意json字符串的引号更改。这是必需的，因为唯一有效的引号是双引号。

演示：http://jsfiddle.net/p5MGG/1/

Answer 2

根据the docs for jQuery data()：

  

当data属性是一个对象（以'{'开头）或数组（以'['开头）时，jQuery.parseJSON用于解析字符串;它必须遵循有效的JSON语法，包括引用的属性名称。

您的data-options 不是有效JSON，因为它使用'代替"。如果您更改为：

<a href="/someurl/" class="someLink" data-options='{"foo":"barski", "bar":"fooski"}'>Link</a>

它做你想要的。

修改：另一种方法是将您的选项存储为单独的data属性：

<a href="/someurl/" class="someLink" data-foo="barski" data-bar="fooski">Link</a>

迭代data()代替：

var options = $(this).data();

Answer 3

从您的示例中，看起来返回的选项被解释为String。如果将它们显式解析为对象形式，则代码应生成预期结果：

var dataOptions = JSON.parse($("a.someLink").data("options"));

for(index in dataOptions) {
   console.log(index, dataOptions[index]);
};