Question

我有一个带有data属性的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

这不是有效的JSON字符串

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

尝试：

<a href="#" data-trigger='{"rem": "albatros"}'>Remove</a> <!-- Double quotes in JSON -->

然后：

document.querySelectorAll("[data-trigger]").forEach(function (trigger, index) {
  var val = JSON.parse(trigger.getAttribute('data-trigger'));
  for( key in val){ //Loop through (JSON-)Object
  	setInnerElements(val[key], key);
  }
  
});

function setInnerElements(val,key){

document.querySelectorAll("[data-container] > [data-"+ key +"]").forEach(function (el, index) {
  	el.innerHTML = val;
  })
}

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

Answer 2

当前停止脚本运行的是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的库。

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

2 个答案: