用通配符合并函数？

Question

我想将以下功能合并成更多的东西eloquent。

基本上我想通过 id 获取元素，如 "title#" 并将“#”推入函数，这样如果您单击 title#x，您将 ReverseDisplay link#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() returns一个NodeList, so we have to use Array.from() to be able to use array methods like forEach. Then we add a click event listener to each element using addEventListener() (see addEventListener vs onclick). Using split('title').join('') we remove the 'title' part from the ID and leave only the number. If you're wondering what are these ` and =>, see template literals and arrow functions.

用通配符合并函数？

Consolidate function with wildcard?

javascript

jquery

wildcard