Question

我希望将以下功能合并为更有说服力的功能。

基本上我想通过id获取元素，例如“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()为每个元素添加一个click事件监听器（参见addEventListener vs onclick）。使用split('title').join('')我们会从ID中删除'title'部分，只留下数字。如果您想知道这些`和=>是什么，请参阅template literals和arrow functions。

使用通配符整合函数？

1 个答案: