无法根据元素的名称将JSON值分配给元素

Not being able to assign JSON value to a an Element based on its name

本文关键字：元素 JSON 分配      更新时间：2024-04-24

我一直在处理一个简单的对象，该对象具有将数据设置到DOM和基于name属性从DOM获取数据的方法，但是，当尝试将数据设置为元素时，我没有得到任何错误，但也没有将数据分配给元素。我做错了什么？

var $ = {
  getData: function(CLASS) {
    var a = document.getElementsByClassName(CLASS),
      b = document.getElementsByClassName(CLASS).length,
      c = {},
      d = 0;
    for (d = 0; d < b; d++) {
      c[a[d].getAttribute('name')] = a[d].getAttribute('value');
    }
    return c;
  },
  setData: function(CLASS, DATA) {
    var a = document.getElementsByClassName(CLASS),
      b = document.getElementsByClassName(CLASS).length,
      c = DATA,
      d = 0;
    for (d = 0; d < b; d++) {
      console.log(c[a[d].getAttribute('name')]);
      a[d].value = c[a[d].getAttribute('name')];
    }
    return c;
  }
};
var c = {
  "roger0": "derp",
  "roger1": "derp",
  "roger2": "derp",
  "roger3": "derp",
  "roger4": "derp"
};
$.setData('item', c);
console.log($.getData('item'));
<!DOCTYPE html>
<html>
<head>
  <title>Form</title>
</head>
<body>
  <div class="item" name="roger0" value="">0</div>
  <div class="item" name="roger1" value="">1</div>
  <div class="item" name="roger2" value="">2</div>
  <div class="item" name="roger3" value="">3</div>
  <div class="item" name="roger4" value="">4</div>
</body>
</html>

您需要通过编辑当前函数来更改setData函数以使用getAttribute方法。需要使用下面的行来设置值。

a[d].setAttribute("value",c[a[d].getAttribute('name')]);

您可以在此处找到有关setAttribute()的更多信息。

setData: function(CLASS, DATA) {
        var a = document.getElementsByClassName(CLASS),
        b = document.getElementsByClassName(CLASS).length,
        c = DATA,
        d = 0;
        for (d = 0; d < b; d++) {
          console.log(c[a[d].getAttribute('name')]);
          console.log(a[d])
          a[d].setAttribute("value",c[a[d].getAttribute('name')]);
        }
        return c;
}
相关文章：