Question

我有一个输入按钮，在laravel项目中的一个刀片foreach循环中写入。

<div class="v-percentage">
       <input id="copycode" type="Submit" value="Embed">
</div>

我正在尝试编写一个脚本，允许我在输入上添加目标属性，这样每个按钮都是唯一的，并执行类似这样的答案here。到目前为止我写的脚本它应该得到元素然后在for循环中添加目标，我不知道我应该怎么做。

var elements = document.getElementById('#copycode');
  alert(elements);
  for(var i = 0; i < elements.length; i++)
  {
    //add the target to the element
  }

另外，当我警告元素返回null时。我怎么能这样做？

Answer 1

document.getElementById('copycode')

getElementById只需要ID，而不是CSS选择器。

此外，这将返回一个元素（不一个NodeList）。整个页面中的ID 唯一。如果要选择多个元素，请使用类和getElementsByClassName。

Answer 2

Javascript函数getElementById只返回一个元素。如果您尝试获取一组元素，请尝试使用类

<input class="copycode" type="submit" value="Embed" />

然后你可以使用jquery选择器来获取元素集并迭代

$(".copycode").each(function(key, element){
    element.attr("target", "foo");
});

如果您不想使用jquery，请使用javascript函数getElementsByClassName和for来迭代元素集

var elements = document.getElementsByClassName("copycode");

for (var i = 0; i < elements.length; i++) {
    elements[i].setAttribute("target", "foo");
}

Answer 3

您不能拥有多个具有相同名称的ID，每页ID应该是唯一的。 getElementById（）方法访问具有指定标识的第一个元素。
如果你想得到所有的输入元素，你应该尝试getElementsByTagName（） getElementsByTagName（）方法访问具有指定标记名的所有元素。 document.getElementsByTagName（ “输入”）;
```
var elements = document.getElementsByTagName("input");
alert(elements);
for(var i = 0; i < elements.length; i++)
{
//add the target to the element
}
```
希望这有帮助！

使用循环添加目标属性

3 个答案: