如何将多个javascript对象实例绑定到元素

我正在尝试创建一个JavaScript播放器，但不确定如何在同一页面中有多个它的实例，以便每个实例都有其on功能

$（函数（）{
变量播放器=功能（obj）{
player.item=obj；
player.audio=player.item.attr（'data-player-src'）；
player.audioElement=document.createElement（'audio'）；
player.audioElement.setAttribute（'src'，player.audio）；
player.audioElement.addEventListener（'canplay'，function（）{
player.item.find（'.length'）.text（'duration:'+player.audioElement.duration+'seconds'）；
});
player.audioElement.addEventListener（'timeupdate'，function（））{
player.item.find（'.duration'）.text（'当前秒数：'+player.audioElement.currentTime）；
});
player.item.find（'.play'）.on（'click'，function（））{
player.play（）；
});
player.item.find（'.pause'）。on（'click'，function（））{
player.pause（）；
});
player.play=函数（）{
player.audioElement.play（）；
}
player.pause=函数（）{
player.audioElement.pause（）；
}
返回球员；
}
$.fn.player=函数（选项）{
返回玩家（$（此））；
}
var playerne=$（“#player1”）.player（）；
var playerne=$（“#player2”）.player（）；
});
.player{
边框：1px纯红；
高度：60px；
宽度：200px；
利润率：8px；
填充：8px；
}

长度
长度
您只需添加

$(function() {
  var player = function(obj) {
    var player={};//this line

进入函数的第一行以使其可重用。要通过jquery使其可用，可以执行以下操作：

$.fn.player=function(options){
  return player($(this));
}

用例

var playerone= $("#el").player();

在jQuery中，最简单的方法是创建一个插件。如果没有jQuery，您将不得不使用
new
关键字来创建实例。这将导致相同的场景，只有最后一个播放器起作用all@psb我不这么认为。。。将其放在var player=function（）后面{谢谢你的快速回复，朱特用片段更新了问题。两个播放器应该播放不同的声音。但似乎作用在同一个对象上。谢谢你，我怎样才能用css类而不是id来实现同样的效果？而不是我想用的#播放器。类，这样它将易于重用。@Psb你需要一个关于w的教程吗编写正确的jQuery插件