js控制audio标签的播放，多个同名id怎么绑定一个事件

Question

<audio id="article_audio" class='article_audio' controls src='/s1000.mp3'>不支持html5音频播放！</audio>
<audio id="article_audio" class='article_audio' controls src='/s2000.mp3'>不支持html5音频播放！</audio>
<audio id="article_audio" class='article_audio' controls src='/s3000.mp3'>不支持html5音频播放！</audio>
$(function(){
var audio = $('#article_audio').get(0);
var totalWidth = $("#pgs").width();  //进度条长度
function startAudio(){
audio.play();
$("#play_btn").addClass("on");
}

function endAudio(){
audio.pause();
    $("#play_btn").removeClass("on");
}

/**
 * 获取音频总时长，并转化为 00:00格式
 */
$('#article_audio').on("loadedmetadata",function () {
        $('#totalTime').text(transTime(this.duration));
   });
  
  
   /**
    * 开始/暂停按钮点击事件
    */
   $("#play_btn").click(function(e){
   if(audio.paused){
   startAudio();
   }else{
   endAudio();
   }
   });
  
   /**
    * 播放进度
    */
   audio.addEventListener('timeupdate',updateProgress,false);
//监听改变暂停/播放icon
       audio.addEventListener("playing", function(){
$("#play_btn").addClass("on");
});
       audio.addEventListener("pause", function(){
$("#play_btn").removeClass("on");
});
//更新进度条
function updateProgress() {
    var value = Math.round((Math.floor(audio.currentTime) / Math.floor(audio.duration)) * 100, 0);
    $('.pgs-play').css('width', value + '%');
    $("#circle").css({"left":(audio.currentTime/audio.duration)*totalWidth-1+"px"});
    $("#playedTime").html(transTime(audio.currentTime));
}

$("#pgs").click(function(e){
var startX = $(this).offset().left;  //进度条开始的x坐标
var endX = e.clientX;  //点击事件的x坐标
rate = (endX - startX) / totalWidth;
$("#circle").css({"left":(endX-startX-1)+"px"});
audio.currentTime = rate*audio.duration;
updateProgress();
});

/**
 * 播放结束
 */
audio.addEventListener('ended',endAudio,false);

$("#circle").on("touchstart",function(e){
endAudio();
});
$("#circle").on("touchmove",function(e){
e.preventDefault();
var startX = $("#pgs").offset().left;  //进度条开始的x坐标
var endX = e.originalEvent.touches[0].clientX;  //点击事件的x坐标
if((endX+1) > startX && endX < (startX+totalWidth)){  //触摸范围大于进度条起点，小于进度条终点
$("#circle").css({"left":(endX-startX-1)+"px"});
rate = (endX - startX) / totalWidth;
audio.currentTime = rate*audio.duration;
updateProgress();
}
});
$("#circle").on("touchstart",function(e){
startAudio();
});


//转换音频时长显示
function transTime(time) {
    var duration = parseInt(time);
    var minute = parseInt(duration/60);
    var sec = duration%60+'';
    var isM0 = ':';
    if(minute == 0){
        minute = '00';
    }else if(minute < 10 ){
        minute = '0'+minute;
    }
    if(sec.length == 1){
        sec = '0'+sec;
    }
    return minute+isM0+sec
}});

Answer 1

可以用querySelectorAll来获取多个元素，但最好不要同ID，也可以用$(".class")通过样式名称来获取

Answer 2

首先，id的含义你搞懂了吗？？？？？其次，多个标签绑定同一个事件，通常可以用样式类名绑定，比如：$(".article_audio").on("click",function(e){
        //do something;
});

Answer 3

id表示唯一，一个页面内，某个id应该是唯一的！！

Answer 4

ID要唯一
绑定同一事件 可以通过类的绑定
$(".article_audio").on("click",function(e){
        //do something;
       在元素上给个特定的标识 
      如 $(this).prop('id') =='XXX' ...
});
或者你可以在元素标签中 内联增加onClick事件 引用同一函数