Javascript onClick触发所有元素。我只想触发指定的元素

Javascript onClick触发所有元素。我只想触发指定的元素,javascript,html,frontend,Javascript,Html,Frontend,我已经搜索了StackOverflow和在线论坛,但没有找到这个问题的答案,虽然我认为这是一个基本问题,但我迷路了 假设有一行有两列,每列有一个音频播放器 我通过添加和删除类,通过JavaScript定制了音频播放器的风格。并通过JavaScript对其功能进行编程 一切都正常运行,但当我添加第二个音频播放器时,它们都会触发JavaScript代码并开始播放。如果我加上第三个或第四个也一样 我的问题是:如何使音频播放器彼此独立播放 我在JavaScript的其他地方也遇到过这种情况,我似乎总是有

我已经搜索了StackOverflow和在线论坛,但没有找到这个问题的答案,虽然我认为这是一个基本问题,但我迷路了

假设有一行有两列,每列有一个音频播放器

我通过添加和删除类,通过JavaScript定制了音频播放器的风格。并通过JavaScript对其功能进行编程

一切都正常运行,但当我添加第二个音频播放器时,它们都会触发JavaScript代码并开始播放。如果我加上第三个或第四个也一样

我的问题是:如何使音频播放器彼此独立播放

我在JavaScript的其他地方也遇到过这种情况,我似乎总是有一个问题,就是只为调用它的元素执行我的代码块,而不是页面上共享相同属性的每个元素

功能播放音频(val){
var aud=$(“音频”)[val-1];
$(“.play pause”)。打开(“单击”,函数(){
如果(澳元暂停){
aud.play();
aud.loop=false;
$(“.play pause”).removeClass(“图标播放”);
$(“.play pause”).addClass(“图标停止”);
}否则{
aud.pause();
$(“.play pause”).removeClass(“图标停止”);
$(“.play pause”).addClass(“图标播放”);
}
});
$(“.next”)。在(“单击”上,函数(){
//用下一个音频文件源替换下面的源
aud.src=“另一个音频源”;
});
aud.ontimeupdate=函数(){
$(“.progress”).css(“宽度”,(aud.currentTime/aud.duration)*100+“%”;
var分钟=数学下限(aud.currentTime/60);
如果(分钟<10){
mins=“0”+字符串(分钟);
}
var secs=数学下限(aud.currentTime%60);
如果(秒<10){
secs=“0”+字符串(secs);
}
$(“#时间戳”).text(分钟+”:“+秒);
};
}
.player{
位置:相对位置;
显示器:flex;
边界半径:0px;
填充:5 16px;
}
.player.info{
显示器:flex;
柔性流动:柱状nowrap;
证明内容:中心;
宽度:50%;
填充:0 16px;
}
.player.info.name{
字体大小:15px;
字号:700;
}
.player.info.singer{
字体大小:12px;
}
.player.audioBtns{
宽度:50%;
/*对齐项目:居中*/
填充:0 16px;
}
.player.audioBtns分区:第n个孩子(1){
字体大小:30px;
}
.player.audioBtns分区:第n个孩子(2),
.player.audioBtns分区:第n个孩子(3){
字号:18px;
}
.玩家.进展{
位置:绝对位置;
高度:5px;
左:0;
底部:0;
背景色:#f8f9fa;
边界半径:0px;
}
.图标循环{
内容:url(“loop.svg”);
宽度:20px;
高度:20px;
显示:块;
}
.图标播放:之前{
内容:url(“https://image.flaticon.com/icons/svg/860/860768.svg");
宽度:30px;
高度:45px;
显示:块;
}
.图标停止:之前{
内容:url(“https://image.flaticon.com/icons/svg/633/633940.svg");
宽度:30px!重要;
高度:40px!重要;
显示:块;
}
.playBtn{
填充:0 16px;
}
.activeOverlay{
过滤器:倒置(42%)深褐色(11%)饱和(1216%)色调旋转(279度)
亮度(88%)对比度(85%);
}
.音频容器{
背景色:#D3;
填充:2%2%!重要;
}
.audioContainer:不是(:最后一个子项){
利润底部:3%;
}
.audioContainerActive{
背景色:#855b6f!重要;
颜色:#f8f9fa!重要;
}
1.IconActive{
过滤器:倒置(92%)深褐色(17%)饱和(3434%)色调旋转(186度)
亮度(127%)对比度(95%);
}

壳牌公司

亚当M

00:00

转盘

亚当M

00:00


您正在使用一个类选择器,它匹配类的所有元素
播放暂停
。 如果您想以特定元素为目标,那么为它们分配不同的ID或类


更多信息:

按类指定id选择是您的问题,您可以详细说明吗?我知道类和id之间的区别。每个容器都有相同的样式,那么为什么我要为每个不同的音频容器分配具有相同内容的不同类名呢?这不是多余的吗?我遗漏了什么吗?你可以使用相同的类进行样式设置,使用不同的ID播放音频。你能给我一个通用语法吗?playaudio(1)playaudio(2)你指定了播放什么内容你的jquery有问题你能显示你的jquery吗?在jquery中使用if语句,在1和2之间切换,并播放正确的音频BTW nice音频