锚标记href函数答案

【问题标题】：Anchor Tag href functions锚标记href函数
【发布时间】：2020-10-13 23:29:20
【问题描述】：

我正在尝试创建一个函数来查找锚标记指向的元素的 id，并将类附加到该元素。我需要这是 vanilla js 而不是 jquery。

例如：

<div id="firstDiv"></div>

<div> Destination </div>
<div> Destination #2 </div>

我们的想法是，一旦您单击锚标记，它会将您带到 div 并将一个类附加到该 div 以启动一个函数。

我编写的脚本运行循环，从 javascript 对象中添加 href 属性和 id 属性的值。见下文：

var rooms = [
{
id: 1,
name: Example,
},
{
id:2,
name: Example #2,
}
]

         for ( x in rooms ) {
           var i = document.getElementById("firstDiv");
           var a = document.createElement("a");
           i.appendChild(a);
           a.href = "#" + rooms[x].id;
           a.innerHTML += rooms[x].name + "<br>";
           a.classList.add("show");
          
        }

        var rect = document.getElementsByTagName("rect");
        for ( i = 0; i < rect.length; i++ ) {
           rect[i].setAttribute("id", rooms[i].id);
        }

输出：

<div id="firstDiv">
<a href="#1"> Example </a>
<a href="#2"> Example #2 </a>
</div>

<div id="1"> Destination </div>
<div id="2"> Destination #2 </div>

下面的函数是我希望该函数在单击 a 标签时对每个相应的 div 执行的操作的示例。

function attach() {
var div = document.getElementById(rooms[i].id);
div.classList.toggle("active");
}

关于如何根据我的特殊需要正确编写此函数的任何建议。 for 循环是否最适合这个或 if/else 语句。我都试过了，但都没有成功。

如果我需要进一步澄清，请告诉我。

【问题讨论】：

您的初始 HTML 示例不包含锚点。
锚标签由第一个for循环创建
为什么要在锚标记中添加 BR？使用 CSS。

标签： javascript html href

【解决方案1】：

看来这就是您要问的问题。见内联 cmets。

document.addEventListener("click", function(event){
  // First, check to see if it was an anchor that was clicked
  // in the document
  if(event.target.nodeName === "A"){
    // If so, add a class to the target 
    // Get the href attribute and strip off the "#", then find that element and toggle the class
  document.getElementById(event.target.getAttribute("href").replace("#","")).classList.toggle("highlight");
  }
});

.highlight { background-color:yellow; }

<div id="firstDiv">
  <a href="#one"> Example </a>
  <a href="#two"> Example #2 </a>
</div>

<div id="one"> Destination </div>
<div id="two"> Destination #2 </div>

【讨论】：

我想这可能就是我想要的。我是否可以将 if 语句中的“A”替换为 js 对象，例如 room[i].id？或者我是否需要将 if 语句放在某种 for 循环中？对不起，我是一个 JavaScript 菜鸟

【解决方案2】：

试试这个：

let anchors = document.querySelectorAll("#firstDiv a");

for (let i = 0; i < anchors.length; i++) {
    anchors[i].addEventListener("click", () => {
        var div = document.getElementById(rooms[i].id);
        div.classList.toggle("active");

}

【讨论】：

【解决方案3】：

你快到了，你只需要为锚标记添加一个 onclick 属性，现在你可以或不能使用第三个附加功能。我将两个实现都包括在内，供你参考。

for ( x in rooms ) {
       var i = document.getElementById("firstDiv");
       var a = document.createElement("a");
       i.appendChild(a);
       a.href = "#" + rooms[x].id;
       a.innerHTML += rooms[x].name + "<br>";
       a.classList.add("show");
       a.onClick=`document.getElementById(${rooms[x].id}).classList.toggle("active")`;
    }

如果你想拥有一个专门的功能，你的循环就变成了

for ( x in rooms ) {
       var i = document.getElementById("firstDiv");
       var a = document.createElement("a");
       i.appendChild(a);
       a.href = "#" + rooms[x].id;
       a.innerHTML += rooms[x].name + "<br>";
       a.classList.add("show");
       a.onClick=`attach(${rooms[x].id})`;
    }

然后你的附加函数变成：

function attach(id) {
 var div = document.getElementById(id);
 div.classList.toggle("active");
  }

如果您有任何问题，请告诉我。

【讨论】：

【解决方案4】：

仅 CSS ?

这个有点跑题了，不过你可以使用:target选择器来设置对应id的样式不用JS。

/* element with an id matching the URL fragment */
:target {
   background: gold;  
}

/* you can combine target with other selectors */
#c:target {
   background: orange
}



/* just a bit of styling */
a,div {
  padding: .5rem;
  display: block;
  width: 20%;
  float:left;
}

<a href="#a">Link to A</a>
<a href="#b">Link to B</a>
<a href="#c">Link to C</a>
<a href="#d">Link to D</a>

<div id="a">A</div>
<div id="b">B</div>
<div id="c">C</div>
<div id="d">D</div>

【讨论】：