如何为类元素分配链接

how to assign links to class elements?

本文关键字：分配 链接 元素      更新时间：2023-09-26

我正在尝试使用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);
}

你只有一个元素，它被删除了。因此，将作业移动到循环中：

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);
}
a {margin: 10px;}
<div class="navigation"></div>
<div class="navigation"></div>
<div class="navigation"></div>

我已经添加了HTML/CSS作为虚拟的东西来重新创建整个事情。

您只创建一次锚标记。 

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);
}

斯菲德尔

相关文章：