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

Question

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

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

然后我不确定接下来需要做什么。

代码笔

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

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) {&nbsp; const tgt = e.target;&nbsp; const isSummary = tgt.tagName==="SUMMARY";&nbsp; const code = tgt.dataset.code;&nbsp; fs.classList.toggle("hide",!isSummary || !code); // show only if summary AND code exists&nbsp; if (isSummary && code) {&nbsp; &nbsp; fs.href=root+code;&nbsp; }&nbsp;&nbsp;}).hide { display:none; }<div id="container">&nbsp; <details id="agriculture" class="details">&nbsp; &nbsp; <summary>Agriculture</summary>&nbsp; &nbsp; <details>&nbsp; &nbsp; &nbsp; <summary data-code="53-7064.00">Picking & packing</summary>&nbsp; &nbsp; </details>&nbsp; &nbsp; <details>&nbsp; &nbsp; &nbsp; <summary data-code="45-2092.02">Farm worker</summary>&nbsp; &nbsp; </details>&nbsp; &nbsp; <details>&nbsp; &nbsp; &nbsp; <summary data-code="45-2091.00">Agricultural Equipment Operator</summary>&nbsp; &nbsp; </details>&nbsp; &nbsp; <details>&nbsp; &nbsp; &nbsp; <summary data-code="45-2093.00">Farmworkers, Farm, Ranch, and Aquacultural Animals</summary>&nbsp; &nbsp; </details>&nbsp; </details>&nbsp; <details id="construction" class="details">&nbsp; &nbsp; <summary>Construction</summary>&nbsp; &nbsp; <details>&nbsp; &nbsp; &nbsp; <summary data-code="47-2061.00">Construction Labourer</summary>&nbsp; &nbsp; </details>&nbsp; &nbsp; <details>&nbsp; &nbsp; &nbsp; <summary data-code="47-2073.00">Operating Engineers and Other Construction Equipment Operators</summary>&nbsp; &nbsp; </details>&nbsp; &nbsp; <details data-code="47-2051.00">&nbsp; &nbsp; &nbsp; <summary>Cement Masons and Concrete Finishers</summary>&nbsp; &nbsp; </details>&nbsp; &nbsp; <details>&nbsp; &nbsp; &nbsp; <summary data-code="47-2021.00">Brickmasons and Blockmasons</summary>&nbsp; &nbsp; </details>&nbsp; &nbsp; <details>&nbsp; &nbsp; &nbsp; <summary data-code="47-4031.00">Fence Erector</summary>&nbsp; &nbsp; </details>&nbsp; &nbsp; <details>&nbsp; &nbsp; &nbsp; <summary data-code="17-3031.01">Surveying Technician</summary>&nbsp; &nbsp; </details>&nbsp; </details></div>