Jquery 如何减少包含略有不同逻辑的函数的数量？

我目前正在使用javascript中的内置音频API开发一款音乐播放器。 看起来是这样的：

我有一个播放列表功能，每当我按下列出歌曲的不同选项卡时，它都会更改歌曲。代码如下所示

$（'#song1'）。单击（函数（）{
audio.pause（）；
audio.currentTime=0；
audio.src=“../sounds/1.mp3”；
音频播放（）；
});
$（'#song2'）。单击（函数（）{
audio.pause（）；
audio.currentTime=0；
audio.src=“../sounds/2.mp3”；
音频播放（）；
});
$（'#song3'）。单击（函数（）{
audio.pause（）；
audio.currentTime=0；
audio.src=“../sounds/3.mp3”；
音频播放（）；
});
$（'#song4'）。单击（函数（）{
audio.pause（）；
audio.currentTime=0；
audio.src=“../sounds/4.mp3”；
音频播放（）；
});
$（'#song5'）。单击（函数（）{
audio.pause（）；
audio.currentTime=0；
audio.src=“../sounds/5.mp3”；
音频播放（）；
});
$（'#song6'）。单击（函数（）{
audio.pause（）；
audio.currentTime=0；
audio.src=“../sounds/6.mp3”；
音频播放（）；
});

---

我怎样才能把它变成一个函数而不是六个？如果我在播放列表中添加更多标签，我还需要能够选择有多少首歌曲。谢谢你

你在这里尝试使用的技巧叫做“不要重复你自己”或“干”

在这种情况下，最简单的方法是使HTML结构对所有元素通用，但使用

class

属性对它们进行分组，并使用

data

属性保存自定义元数据。然后，您可以对它们全部使用单个事件处理程序，如下所示：

歌曲1
歌曲2

$（'.song'）。单击（函数（）{
audio.pause（）；
audio.currentTime=0；
audio.src=$（this.data（'src'）；
音频播放（）；
});

这种技术有几个好处，包括更简洁的HTML和JS代码，以及更好的关注点分离；也就是说，如果您想添加另一个要播放的文件，只需添加另一个具有正确

data

属性的HTML元素，就可以不必触摸JS代码了

另外请注意，如果内容尚未缓存，则可能需要在

audio.play（）之前调用
audio.load（）