Question

我是JavaScript和类似的新手，我遇到了问题。在我的网站上，用户可以创建任意数量的输入。现在，每个新添加的输入组都有2个边（名称和值）。我需要将这些内容添加到JavaScript 对象中，就像那样：

{
  "texture1" : "block/texture",
  "texture2" : "block/texture"
}

输入字段具有相同的名称，因此我可以使用document.getElementsByName("textureName")和document.getElementsByName("textureValue")来获取它们。

我或许能够遍历这些对象的索引（因为它们提供了整个outerHTML标记而不是它们的值），但我不知道如何正确地做到这一点。

顺便说一句，HTML代码本身看起来与此类似（只是用户可以插入任何数量的代码）：

<div class="left">
  <div class="option">Name:<br><input name="textureName" value="particle"></div>
</div>
<div class="right">
  <div class="option">Value:<br><input name="textureValue" value="block/name"></div>
</div>

Answer 1

getElementsByName为您提供了元素对象的集合，而不是他们的outerHTML。其中，HTMLInputElements的{{1}}属性将是输入的值。

由于你正在使用并行集合，你可以按照你的建议循环遍历它们，使用“name”的值作为属性的名称并使用“value”的值来构建你的对象。一个值：

value

这是有效的，因为在JavaScript中，您可以使用点表示法和属性名称文字（var names = documents.getElementsByName("textureName"); var values = documents.getElementsByName("textureValues"); if (names.length !== values.length) { // Something's wrong somewhere } var index; var obj = {}; for (index = 0; index < names.length; ++index) { obj[names[index].value] = values[index].value; }），或使用括号表示法和属性名称 string （{{1 }}）。所以在上面，我们使用后者。

虽然obj.foo有效并且非常适合您的使用案例，但我只会提到您还有obj["foo"]可用（在所有现代浏览器上，以及IE8）。这允许您使用任何有效的CSS选择器选择元素，这使您可以更精确，而无需向HTML添加额外的标记属性和类等。同样，你可能在这里不需要它，但对将来参考有用。 getElementsByName上可以使用querySelectorAll，也可以在个别元素上查看，只能在其后代中搜索。还有querySelectorAll，它不会返回列表，而是返回第一个匹配（或document不匹配）。

Answer 2

感谢您的回答！无论如何，在我阅读你的解决方案之前，我自己找到了解决方案：

var elementsCount = document.getElementsByName("name").length;
var textureName, textureValue, texturePair = {};
for (var i = 0; i<=elementsCount; i++) {
   textureName = document.getElementsByName("textureName")[i].value;
   textureValue = document.getElementsByName("textureValue")[i].value;
   texturePair[textureName] = textureValue;
   console.log(i);
   console.log(texturePair);
}

来自任意数量输入的JavaScript对象

2 个答案: