javascript - 使用通配符合并函数？

Question

我想将以下功能整合为更具说服力的东西。

基本上，我想通过 id 获取元素，例如“title#”，并将“#”插入函数中，这样，如果您单击 title#x，您将反向显示链接#xcontent。

感谢任何建议，谢谢。

document.getElementById("title1").onclick = function() {myFunction()};

function myFunction() {
     ReverseDisplay('link1content');
}

document.getElementById("title2").onclick = function() {myFunction1()};

function myFunction1() {
     ReverseDisplay('link2content');
}

document.getElementById("title3").onclick = function() {myFunction2()};

function myFunction2() {
     ReverseDisplay('link3content');
}

document.getElementById("title4").onclick = function() {myFunction3()};

function myFunction3() {
     ReverseDisplay('link4content');
}

document.getElementById("title5").onclick = function() {myFunction4()};

function myFunction4() {
     ReverseDisplay('link5content');
}

document.getElementById("title6").onclick = function() {myFunction5()};

function myFunction5() {
     ReverseDisplay('link6content');
}


document.getElementById("title7").onclick = function() {myFunction6()};

function myFunction6() {
     ReverseDisplay('link7content');
}

document.getElementById("title8").onclick = function() {myFunction7()};

function myFunction7() {
     ReverseDisplay('link8content');
}

Answer 1

您可以使用document.querySelectorAll() :

const ReverseDisplay = x => console.log(x)

Array.from(document.querySelectorAll('[id^="title"]'))
  .forEach(el => el.addEventListener('click', () =>
     ReverseDisplay(`link${el.id.split('title').join('')}content`)))

<div id="title1">title1</div>
<div id="title2">title2</div>
<div id="title3">title3</div>

document.querySelectorAll() 返回 NodeList ，所以我们必须使用 Array.from()能够使用像 forEach 这样的数组方法。然后我们使用addEventListener()为每个元素添加一个点击事件监听器。 (参见addEventListener vs onclick)。使用 split('title').join('') 我们从 ID 中删除 'title' 部分，只留下数字。如果您想知道这些 ` 和 => 是什么，请参阅 template literals和 arrow functions .