Javascript从点击执行功能答案

【问题标题】：Javascript execute function from clickJavascript从点击执行功能
【发布时间】：2017-08-18 19:17:05
【问题描述】：

我有这三个功能，我也想应用 DRY 原则。

function shakeBell(){
  document.getElementById('shakeBell').play();
}

function shakeShake() {
  document.getElementById('shakeShake').play();
}

function blowWhistle(){
  document.getElementById('blowWhistle').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">
<a href="javascript:shakeBell();">
<img src="images/Golden_Bell.png" style="width:100px; height 100px;"></a>
<img src="images/Maracas.png" style="width:100px; height:100px;">
</div>

我有多个图像，单击它们会播放该图像的特定声音文件。如果不为每张图片制作单独的功能，我该如何做到这一点？

【问题讨论】：

为什么不将元素的 id 作为参数传递给您的函数？

标签： javascript html dry

【解决方案1】：

您可以使用一个参数执行单个功能，例如：

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

那么你可以这样称呼它：

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

【讨论】：

事件监听器是比内联 JavaScript 更好的方法

【解决方案2】：

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>

【讨论】：

如果如果如果？数据只能是三者之一。 if else if Else 语句或 switch 会更好。伊戈尔的答案更具可扩展性，因为无论data 是什么，您都调用相同的函数document.getElementById (data).play ()
@MatthewCiaramitaro 你错了。这些是背靠背的 if 语句。你说得对，其他结构更正确。
@MatthewCiaramitaro 我编辑了它，但你是对的，有很多 if 语句，Igor 的答案是最好的......
@catbadger 背靠背 if 语句有 3 个比较。 if else 有最好的情况 1 比较最坏的情况 3。开关表有一个查找。并且首先使用数据作为 id 可以避免所有这些。我看不出我哪里错了
@LarsS。您的编辑使 3 个 if 语句变得无关紧要。只要数据是三者之一，它们都会做同样的事情。你可以用||s 把它写成一个 if 语句

【解决方案3】：

定义一个事件监听器而不是内联 JS。给锚点一个与其播放的声音相关的 ID——在我的示例中，我将 _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>

【讨论】：