Question

我正在尝试创建一个函数，该函数查找定位标记指向的元素的ID，并将一个类附加到该元素。我需要它是香草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>

下面的函数是我希望函数在单击标签时为每个对应的div所做的示例。

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

关于如何正确满足我的特殊需求的任何建议。 for循环最适合此语句或if / else语句。我都尝试过，但是都没有。

如果需要更多说明，请告诉我。

Answer 1

这似乎是您要问的问题。查看内嵌评论。

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>

Answer 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");

}

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

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

Answer 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>

锚点标签href函数

4 个答案: