javascript - Jquery data() 在 CSS 选择器上返回未定义

Question

我正在测试 jQuery 的 data() 方法，它看起来非常强大。这实际上是为了测试我将为单元测试制作的固定装置(通过用双引号替换单引号来解析 JSON 元素)。

var test = $('#test');
console.log(test.data('table[data-table-values]')); 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="test" data-table-values="'{'header': ['value1', 'value2']}'"></table>

它返回未定义。然而，根据我的理解，这应该返回选择器是什么，在本例中应该是: '{'header': ['value1', 'value2']}'

我错过了什么吗？

编辑:作为引用，我正在测试执行此操作的函数:

function parseStuff(str) {
  return JSON.parse(
    str
      .substring(1, (str.length - 1))
      .replace(/'/g, '"')
  );
}

但问题是，传递给 Controller ​​/容器的内容(我的 Rails 知识有限，所以我继续阅读我能读到的内容)。但例如某些代码如下所示:

<instance of container/controller>.data('tableValues')

其中“tableValues”在代码的前面被定义为选择器，并且容器/ Controller 的实例可能是我假设的表对象本身:

tableValues: 'table[data-table-options]' //A bunch more of these selectors are defined

所以本质上我正在尝试设置一个 HTML 固定装置，我可以对其进行测试。我发布的 HTML 是它在 chrome 开发工具中的显示方式(显然 table 元素中有更多内容，但我只是特别关注这个选择器)

Answer 1

检索数据-*值

您将该属性引用为table[data-table-values]，这在两个帐户上是不正确的:

1. table[] 不是必需的。我不确定你为什么使用它。这不是选择器，这是属性查找。
2. data-table-values 应为table-values。您的 HTML 属性称为“data-table-values”，但 .data() 查找不需要任何 HTML data-* 属性。

这两个方法的最终结果都是 .data('table-values')，如底部示例所示。

如果您想查找实际的属性值，那么您需要包含 data- 前缀，因为您正在搜索该特定的 HTML 属性；例如，$test.attr('data-table-values')，但对 data-* 属性执行此操作是违反惯例的。

关于 .data() 方法，您应该注意的一件事是，它在内存中运行。它不会更新您的 HTML。如果您使用任何类型的检查器，您都会看到设置 $test.data('foo','bar')，它不会将 foo 属性绑定(bind)到元素，也不修改 DOM，它在 jQuery 内部管理值。

修复 JSON

要将值用作 JSON，您需要将其存储为格式正确的 JSON，现在您使用单引号作为封装 JSON 字符串分隔符 '{'':[]}' 和还可以界定对象键。您必须使用双引号来表示有效的 JSON。

在下面的示例中，我剪掉了开头和结尾的单引号 (')，然后用双引号 " 替换键周围的所有单引号。I为了清楚起见，将其分成几行，但可以压缩为几行。

注意:如果 JSON 有效并正确存储在 data-* 属性中，则客户端不会需要做很多工作来擦洗它，代码会更简单

var $test = $('#test');
var str = $test.data('table-values'); // <=== was:"table[data-table-values]"
console.log('data-* value:', str);

// format to a valid JSON string
str = str.replace(/^'+/, ''); // remove leading single quote
str = str.replace(/'+$/, ''); // remove ending single quote
str = str.replace(/'/g, '"'); // use double quotes
console.log('Replaced single quotes:', str);

// make JS object
var obj = JSON.parse(str);
console.log('obj:', obj);
console.log('obj.header[1]:', obj.header[1]);

// make JSON string
console.log('JSON:', JSON.stringify(obj));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="test" data-table-values="'{'header': ['value1', 'value2']}'"></table>

<小时/>

更好的 HTML

以下是 @guest271314 的示例的建议，它演示了 HTML 中具有格式良好的 JSON。

请注意，行数少得多(获取 JSON 对象只需要一行)。提供的是 jQuery 和 ES6 等效项:

// jQuery
var obj = $('#test').data('table-values');
console.log('obj:', obj);
console.log('obj.header[1]:', obj.header[1]);
console.log('JSON.stringify(obj):', JSON.stringify(obj));

// ES6
var obj2 = JSON.parse(document.querySelector('#test').dataset['tableValues']);
console.log('obj2:', obj2);
console.log('obj2.header[1]:', obj2.header[1]);
console.log('JSON.stringify(obj2):', JSON.stringify(obj2));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="test" data-table-values='{"header": ["value1", "value2"]}'></table>