Question

大家好我有一个<a>标签，如下所示：

<a class="js-swatch-item-link swatch__item-inner-image" data-layer-click="{"event":"interaction","interaction":{"category":"colorPattern","action":"Select","label":"DARK GREY MELANGE","value":"DARK GREY MELANGE"}}}" href="#">DARK GREY MELANGE</a>

我正在尝试获取JSON字符串的interaction部分的值，然后将此值分配给<a>标记的innerHTML。

我的JavaScript代码如下所示：

var SWATCH_COLOR_LINK = '.swatch.colorpattern a';
var swatchColorLink = document.querySelectorAll(SWATCH_COLOR_LINK);
var swatchColorTitle = JSON.parse(swatchColorLink.getAttribute('data-layer-click')).interaction.value;

for (var i = 0; i < swatchColorLink.length; i++) {
    swatchColorLink[i].innerHTML = swatchColorTitle;
}

该函数给出了以下错误：swatchColorLink.getAttribute is not a function

但是，如果我尝试选择第一个元素：document.querySelectorAll(SWATCH_COLOR_LINK)[0]

该函数工作正常，并将正确的值从JSON字符串设置为<a>标记的innerHTML。

我猜测我在循环中做错了什么来遍历所有<a>标签并为它们分配JSON字符串的值。

Answer 1

你的错误在于swatchColorLink.getAttribute()。因为swatchColorLink的{{1}}值是从querySelectorAll()方法返回的NodeList。当您执行document.querySelectorAll(SWATCH_COLOR_LINK)[0]时，您将从此NodeList获取第一个元素，因此在这种情况下，您的swatchColorLink是单个节点。

var SWATCH_COLOR_LINK = '.swatch.colorpattern a';
var swatchColorLink = document.querySelectorAll(SWATCH_COLOR_LINK);


for (var i = 0; i < swatchColorLink.length; i++) {
    var swatchColorTitle = JSON.parse(swatchColorLink[i].getAttribute('data-layer-click')).interaction.value;
    swatchColorLink[i].innerHTML = swatchColorTitle;
}

Answer 2

更正您的JSON字符串{"event":"interaction","interaction":{"category":"colorPattern","action":"Select","label":"DARK GREY MELANGE","value":"DARK GREY MELANGE"}}}

你应该转义字符串中的引号"并删除最后一个}

<a class="js-swatch-item-link swatch__item-inner-image" data-layer-click="{\"event\":\"interaction\",\"interaction\":{\"category\":\"colorPattern\",\"action\":\"Select\",\"label\":\"DARK GREY MELANGE\",\"value\":\"DARK GREY MELANGE\"}}"href="#">DARK GREY MELANGE</a>

将值从JSON属性赋值给元素的innerHTML

2 个答案: