使用 javascript 从 html5 详细信息摘要数据元素创建超链接

Question

我正在使用 HTML5 中的详细信息和摘要。我想要一份职业清单。当用户打开特定专业人士的摘要项目时，它会呈现一个超链接到具有该专业的功能技能要求的页面。此页面的文档代码（例如 47-2061.00）存储在每个摘要元素的数据元素中。
如何使用摘要标签中的数据元素编写超链接（例如https://www.onetonline.org/link/summary/），并在末尾附加信息？

我相信我需要为 foreach 使用 for 循环，以使用 document.getElementsByTagName 将侦听器附加到每个摘要标签，但我可以给他们一个类并通过 getElementsByClassName 来完成

那我不知道接下来我需要做什么。

codepen

//https://www.onetonline.org/link/summary/



var userSelection = document.getElementsByTagName("summary");

for (let i = 0; i < userSelection.length; i++) {
  userSelection[i].addEventListener("toggle", function() {
    console.log("Added listener " + i);
  })
}

var a = document.createElement('a');
var linkText = document.createTextNode("functional skills");
a.appendChild(linkText);
a.title = "functional skills";
a.href = "https://www.onetonline.org/link/summary/";
/*the above needs to append the data attribute from the summary item clicked for example https://www.onetonline.org/link/summary/53-7064.00*/
document.body.appendChild(a);

<details id="agriculture" class="details">
  <summary>Agriculture</summary>
  <details>
    <summary data="53-7064.00">Picking & packing</summary>
  </details>
  <details>
    <summary data="45-2092.02">Farm worker</summary>
  </details>

  <details>
    <summary data="45-2091.00">Agricultural Equipment Operator</summary>
  </details>
  <details>
    <summary data="45-2093.00">Farmworkers, Farm, Ranch, and Aquacultural Animals</summary>
  </details>

</details>

<details id="construction" class="details">
  <summary>Construction</summary>
  <details>
    <summary data="47-2061.00">Construction Labourer</summary>
  </details>
  <details>
    <summary data="47-2073.00">Operating Engineers and Other Construction Equipment Operators</summary>
  </details>
  <details data="47-2051.00">
    <summary>Cement Masons and Concrete Finishers</summary>
  </details>
  <details>
    <summary data="47-2021.00">Brickmasons and Blockmasons</summary>
  </details>
  <details>
    <summary data="47-4031.00">Fence Erector</summary>
  </details>
  <details>
    <summary data="17-3031.01">Surveying Technician</summary>
  </details>
</details>

Answer 1

我会委托：

const root = "https://www.onetonline.org/link/summary/"

const fs = document.createElement('a');
fs.id="FS";
const linkText = document.createTextNode("functional skills");
fs.appendChild(linkText);
fs.classList.add("hide");
fs.title = "functional skills";
document.body.appendChild(fs);


document.getElementById("container").addEventListener("click",function(e) {
  const tgt = e.target;
  const isSummary = tgt.tagName==="SUMMARY";
  const code = tgt.dataset.code;
  fs.classList.toggle("hide",!isSummary || !code); // show only if summary AND code exists
  if (isSummary && code) {
    fs.href=root+code;
  }  
})

.hide { display:none; }

<div id="container">
  <details id="agriculture" class="details">
    <summary>Agriculture</summary>
    <details>
      <summary data-code="53-7064.00">Picking & packing</summary>
    </details>
    <details>
      <summary data-code="45-2092.02">Farm worker</summary>
    </details>

    <details>
      <summary data-code="45-2091.00">Agricultural Equipment Operator</summary>
    </details>
    <details>
      <summary data-code="45-2093.00">Farmworkers, Farm, Ranch, and Aquacultural Animals</summary>
    </details>

  </details>

  <details id="construction" class="details">
    <summary>Construction</summary>
    <details>
      <summary data-code="47-2061.00">Construction Labourer</summary>
    </details>
    <details>
      <summary data-code="47-2073.00">Operating Engineers and Other Construction Equipment Operators</summary>
    </details>
    <details data-code="47-2051.00">
      <summary>Cement Masons and Concrete Finishers</summary>
    </details>
    <details>
      <summary data-code="47-2021.00">Brickmasons and Blockmasons</summary>
    </details>
    <details>
      <summary data-code="47-4031.00">Fence Erector</summary>
    </details>
    <details>
      <summary data-code="17-3031.01">Surveying Technician</summary>
    </details>
  </details>
</div>