用通配符合並函數？

我想將以下功能合併爲更能說服力的東西。用通配符合並函數？

基本上我想通過id獲得像「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'); 
 
}

來源

2016-09-28 Storm Brewer

這聽起來像是一個班級工作，而不是IDS。同樣在你的例子中'function（）{myFunction（）}'等同於'myFunction'。編輯：另外，你的'myFunction'變量被多次重新定義，但是由於它的函數聲明只有最後一個被用於所有的實例。 – tcooc

對於這個問題，你的html是什麼樣的？ – tcooc

'ReverseDisplay'做什麼？ – depperm

您可以使用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。

來源

2016-09-28 14:55:21

用通配符合並函數？

回答

相關問題