Javascript通过单击执行函数

我有这三个功能，我想应用干燥的原则了

JS

HTML

---

我有多个图像，当点击时播放该图片的特定声音文件。如何在不为每个图像创建单独函数的情况下执行此操作？

您可以使用一个参数执行单个函数，如：

function shake(id){
  document.getElementById(id).play();
}

那么你可以称之为：

<a href="javascript:shake('shakeBell');">
<img src="images/Golden_Bell.png" style="width:100px; height 100px;"></a>

JS:

  function playSound(data) {
        document.getElementById(data).play();
}

HTML:

<audio id="shakeBell"  src="audio/bell-ringing-02.mp3" preload="auto"></audio>
<audio id="shakeShake"  src="audio/pill-bottle-1.mp3" preload="auto"></audio>
<audio id="blowWhistle"  src="whistle-flute-2.mp3" preload="auto"></audio>

<div class="imagelist">
    <img src="images/Golden_Bell.png" style="width:100px; height 100px;" onClick="playSound("shakeBell)">
    <img src="images/Maracas.png" style="width:100px; height:100px;" onClick="playSound("shakeBell)">
</div>

---

定义事件侦听器而不是内联JS。给锚定一个与其播放的声音相关的ID——在我的示例中，我将

\u a

添加到ID中

const soundIds = ['shakeBell', 'shakeShake', 'blowWhistel'];
soundIds.forEach(function(id) {
    document.getElementById(id + '_a').addEventListener(function() {
        document.getElementById(id).play();
    });
});

<audio id="shakeBell"  src="audio/bell-ringing-02.mp3" preload="auto"></audio>
<audio id="shakeShake"  src="audio/pill-bottle-1.mp3" preload="auto"></audio>
<audio id="blowWhistle"  src="whistle-flute-2.mp3" preload="auto"></audio>

<div class="imagelist">
<a href="#" id="shakeBell_a">
<img src="images/Golden_Bell.png" style="width:100px; height 100px;"></a>
<img src="images/Maracas.png" style="width:100px; height:100px;">
</div>

constsoundids=['shakeBell'，'shakeShake'，'blowWhistel']；
soundIds.forEach（函数（id）{
document.getElementById（id+“_a”）.addEventListener（函数（）{
document.getElementById（id.play（）；
});
});

为什么不将元素id作为参数传递给函数？事件侦听器比内联JavaScriptIf更好？数据只能是三种数据之一。if-else-if-else语句或开关会更好。Igor的答案更具可扩展性，因为无论数据是什么，调用相同的函数

document.getElementById（data.play（）

@MatthewCiaramitaro都是错误的。这些是背对背的if语句。你是对的，其他结构更正确。@MatthewCiaramitaro我编辑了它，但你是对的，有很多if语句，Igor的答案是最好的…@Cat獾背对背if语句有3个比较。if else具有最佳情况1比较最坏情况3。开关表有一个查找。首先使用数据作为id可以避免所有这些。我不知道我在哪里wrong@LarsS. 您的编辑使3 if语句无关。只要数据是三者之一，它们都做同样的事情。您可以使用

| |

s将其编写为一个if语句

<audio id="shakeBell"  src="audio/bell-ringing-02.mp3" preload="auto"></audio>
<audio id="shakeShake"  src="audio/pill-bottle-1.mp3" preload="auto"></audio>
<audio id="blowWhistle"  src="whistle-flute-2.mp3" preload="auto"></audio>

<div class="imagelist">
    <img src="images/Golden_Bell.png" style="width:100px; height 100px;" onClick="playSound("shakeBell)">
    <img src="images/Maracas.png" style="width:100px; height:100px;" onClick="playSound("shakeBell)">
</div>

const soundIds = ['shakeBell', 'shakeShake', 'blowWhistel'];
soundIds.forEach(function(id) {
    document.getElementById(id + '_a').addEventListener(function() {
        document.getElementById(id).play();
    });
});

<audio id="shakeBell"  src="audio/bell-ringing-02.mp3" preload="auto"></audio>
<audio id="shakeShake"  src="audio/pill-bottle-1.mp3" preload="auto"></audio>
<audio id="blowWhistle"  src="whistle-flute-2.mp3" preload="auto"></audio>

<div class="imagelist">
<a href="#" id="shakeBell_a">
<img src="images/Golden_Bell.png" style="width:100px; height 100px;"></a>
<img src="images/Maracas.png" style="width:100px; height:100px;">
</div>