如何在单个按钮中绑定多个元素ID实现批量高亮链接效果

存在的错误 #

• HTML标签嵌套错误：你把<a>标签放在了<p>标签外面，结束标签顺序也完全颠倒，属于无效DOM结构，会导致浏览器解析异常
• 原有JS逻辑每次仅支持传入单个ID操作单个元素，自然只能实现单个链接高亮，且你CSS中已经预设了.highlight a的规则，完全不需要逐个操作a标签

最简修改方案 #

直接操作所有链接的外层容器div#thinger，给外层容器加/删highlight类即可一次性控制所有链接的样式，仅需要改少量代码：

<script type="text/javascript">
function hl() {
    // 直接取外层容器
    var container = document.getElementById("thinger");
    container.className = "highlight";
}
function unhl() {
    var container = document.getElementById("thinger");
    container.className = "";
}
</script>
<style type="text/css">
.highlight a {
    background-color: yellow;
    font-weight: bold;
}
</style>

</head>
<body>
<div id="thinger">
   <p>Visit  <a id="1" href="https://instagram.com/">Instagram</a></p>
   <p>Visit <a id="2" href="https://www.facebook.com/">Facebook</a></p>
   <p>Visit <a id="3" href="https://discord.gg/">Discord</a></p>
</div>
<button onclick="hl();">Highlight</button>
<button onclick="unhl();">Unhighlight</button>

如果确实需要单独控制多个指定ID的链接，也可以修改函数支持传入ID数组，批量循环操作即可：

function hl(idList) {
  idList.forEach(id => {
    document.getElementById(id).className = "highlight";
  })
}
// 按钮调用写法：<button onclick="hl(['1','2','3']);">Highlight</button>

内容的提问来源于stack exchange，提问作者Ceban Marian