用通配符合并函数？答案

【问题标题】：Consolidate function with wildcard?用通配符合并函数？
【发布时间】：2016-09-28 14:46:18
【问题描述】：

我想把下面的函数合并成更雄辩的东西。

基本上我想通过 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');
}

【问题讨论】：

这听起来像是类的工作，而不是 ids。同样在您的示例中function() {myFunction()} 等效于myFunction。编辑：另外，您的 myFunction 变量被多次重新定义，但由于它是一个函数声明，只有最后一个用于所有实例。
对于这个问题，你的html是什么样的？
ReverseDisplay 是做什么的？

标签： javascript jquery wildcard

【解决方案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。

【讨论】：