Question

我正在尝试使用javascript为我的导航栏指定链接。我给了我的导航链接一个类名：“导航”。似乎循环最终为我的所有链接元素分配了“javascript”。

var myArray = document.getElementsByClassName("navigation"); // array
var text = ["HTML", "DOM", "Javscript"];

var a = document.createElement("a");

for (var i = 0; i < myArray.length; i++) {
  var linkText = document.createTextNode(text[i]); 
  a.appendChild(linkText);
  a.href = "#" + text[i];
  document.body.appendChild(a);
}

Answer 1

您只有一个元素，它会被删除。所以将分配移动到循环中：

＆＃13;

var myArray = document.getElementsByClassName("navigation"); // array
var text = ["HTML", "DOM", "Javscript"];

for (var i = 0; i < myArray.length; i++) {
  var a = document.createElement("a");
  var linkText = document.createTextNode(text[i]); 
  a.appendChild(linkText);
  a.href = "#" + text[i];
  document.body.appendChild(a);
}

＆＃13;

a {margin: 10px;}

＆＃13;

<div class="navigation"></div>
<div class="navigation"></div>
<div class="navigation"></div>

＆＃13;

我已将HTML / CSS添加为虚拟内容以重新创建整个内容。

Answer 2

您只创建一次锚标记。

var myArray = document.getElementsByClassName("navigation"); // array
var text = ["HTML", "DOM", "Javscript"];


for (var i = 0; i < myArray.length; i++) {
  var a = document.createElement("a");
  var linkText = document.createTextNode(text[i]);
  a.appendChild(linkText);
  a.href = "#" + text[i];
  document.body.appendChild(a);
}

<div class="navigation"></div>
<div class="navigation"></div>
<div class="navigation"></div>

for (var i = 0; i < myArray.length; i++) {
    var a = document.createElement("a");     // Changed here
    var linkText = document.createTextNode(text[i]); 
    a.appendChild(linkText);
    a.href = "#" + text[i];
    document.body.appendChild(a);
}

jsfiddle

如何为类元素分配链接？

2 个答案: