javascript - 获取数据属性的JSON值，并在特定DOM元素中搜索匹配的Json key -> 数据属性

Question

我有一个带有数据属性的 HTML 元素:

<a href="#" data-trigger="{ "rem": "albatros", "ap":1 }'">Remove</a>
<div data-container>
    <p>lorem ipsum<p>
    <p data-rem></p>
</div>

1.

在 data-trigger有时(并非总是)我发送一个值:

我想收集具有属性 data-trigger 的所有元素:

document.querySelectorAll(['data-trigger']).forEach(function (trigger, index) {

对于每个 trigger获取 DOM 和 JSON 值并解析它:

dom = trigger    
value = JSON.parse(trigger.getAttribute('data-trigger'));

我得到DOM引用，但对于我总是得到的值 null

通过使用 getAttribute我要在 DOM 中再次调用吗？

循环data-container搜索具有 JSON.parse 中找到的键之一属性的元素，并设置它们的值，即键的值。

例如:

<p data-rem>albatros</p>

Answer 1

当前阻止脚本运行的是 querySelectorAll() 内的选择器。

应该是'[data-trigger]'，不是['data-trigger']。

修复此问题后，您将能够获取具有 data-trigger 属性的所有元素。但是，您放置在 data-trigger 属性中的字符串不会解析为 JavaScript 对象(正如您可能期望的那样)。最好的选择是将引号替换为双引号，并将双引号替换为引号，使其成为有效的 JSON 字符串并解析它:

<a href="#" data-trigger='{"rem": "albatros"}'>Remove</a>

JSON.parse(elem.getAttribute('data-trigger')) // where elem is the DOM element above

您还没有完全清楚该脚本的用途，但是假设您想要查找 'data-'+foundKey 等于 foundVal 的 DOM 元素列表，您可以制作以下选择器:

document.querySelectorAll('[data-'+foundKey+'="'+foundVal+'"]').forEach(function(el, i){
  console.log(el, i);
})

...但在你的情况下，这不会做任何事情，因为你没有任何带有

的元素

<x data-rem="albatros"></x>

这是我正在谈论的内容的一个工作示例，应用于您的标记:

document.querySelectorAll('[data-trigger]').forEach(function (trigger, index) {
  const triggerProp = JSON.parse(trigger.getAttribute('data-trigger')),
        foundKey = Object.keys(triggerProp)[0],
        foundVal = triggerProp[Object.keys(triggerProp)[0]],
        targets = document.querySelectorAll('[data-'+foundKey+']').forEach(function(target, index) {
    console.log(target, 'key:'+foundKey, 'val:'+target.getAttribute('data-'+foundKey));
  });
})

<a href="#" data-trigger='{"rem": "albatros"}'>Remove</a>
<div data-container>
    <p>lorem ipsum<p>
    <p data-rem="test"></p>
</div>

请注意，它仅在 data-trigger 的值是有效的 JSON 时才有效。如果不是，它就会惨败。您可以通过 try/catch 函数来保护您的脚本免受这种风险，该函数首先将值测试为 JSON。另一种选择是使用解析宽松 JSON 的库。