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

Question

I'm trying to create a JavaScript player, but not sure how can i have multiple instance of it in the same page such that each have its on functionality

 $(function() { var player = function(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('current seconds : ' + player.audioElement.currentTime); }); player.item.find('.play').on('click', function() { player.play(); }); player.item.find('.pause').on('click', function() { player.pause(); }); player.play = function() { player.audioElement.play(); } player.pause = function() { player.audioElement.pause(); } return player; } $.fn.player = function(options) { return player($(this)); } var playerone = $("#player1").player(); var playerone = $("#player2").player(); }); 

 .player { border: 1px solid red; height: 60px; width: 200px; margin: 8px; padding: 8px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="player" id="player1" data-player-src="http://www.soundjay.com/misc/sounds/bell-ringing-01.mp3"> <div class="length">Length</div> <div class="duration"></div> <input type="button" class="play" value="Play" /> <input type="button" class="pause" value="Pause" /> </div> <div class="player" id="player2" data-player-src="https://www.soundjay.com/free-music/sounds/midnight-ride-01a.mp3"> <div class="length">Length</div> <div class="duration"></div> <input type="button" class="play" value="Play" /> <input type="button" class="pause" value="Pause" /> </div> 

Currently the button clicks on player1 will trigger player2 or vice versa. How can i make each player independent on each other in the same page

Answer 1

You just need to add

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

into the first line of your function to make it reusable. To make it usable through jquery you can do:

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

Usecase

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