使用 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) {

  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>