如何縮短重複功能

如何讓此代碼更有效或更短。我覺得有太多的重複功能。有沒有辦法使這一切都在一個更短的？如何縮短重複功能

<html> 
<body> 

<button onclick="myFunction()">Audio 1</button> 
<button onclick="myFunction2()">Audio 2</button> 
<button onclick="myFunction3()">Audio 3</button> 


<script> 
function myFunction() { 
    var a = new Audio('Link1'); 
    a.play(); 
} 

function myFunction2() { 
    var b = new Audio('Link2'); 
    b.play(); 
} 

function myFunction3() { 
    var c = new Audio('Link3'); 
    c.play(); 
} 

</script> 

</body>

來源

2017-10-16 qtt qtt

通'鏈接1/2/3'的功能，你可以只使用一個函數'myFunction的（ '鏈接1'）'例如 – Huangism

我會嚴厲反對這個建議。 HTML中的JavaScript成爲維護中的一個主要問題，違背了經常引用的「關注點分離」 – zfrisch

@zfrisch你能澄清一下你建議的是什麼嗎？一般使用JavaScript？ –

您可以將參數添加到功能的鏈接。

HTML：

<button onclick="playAudio('link1')">Audio 1</button> 
<button onclick="playAudio('link2')">Audio 2</button> 
<button onclick="playAudio('link3')">Audio 3</button>

的Javascript：

function playAudio(link) { 
    var audio = new Audio(link); 
    audio.play(); 
}

來源

2017-10-16 17:08:08

非常感謝。 –

使用函數調用的參數，嘗試以下操作：

<button onclick="doPlay(1)">Audio 1</button> 
<button onclick="doPlay(2)">Audio 2</button> 
<button onclick="doPlay(3)">Audio 3</button> 


function doPlay(index) { 
    var a = new Audio('Link' + index); 
    a.play(); 
}

來源

2017-10-16 17:07:15 dhilt

@qttqtt只是通過[函數參數]（https://www.w3schools.com/js/js_function_parameters.asp）：我將合適的'index'（1，2，3）傳遞給'doPlay'，所以。 .. – dhilt

感謝您的幫助。 –

使用'index'參數（1,2,3）比'token'參數（'link1'等）更通用，因爲'token'可以被改變（例如'myPrettyLink1'等），而'index'只是一個索引。 – dhilt

如何縮短重複功能

回答

相關問題