As a novice in Jquery and CSS/scss, I've managed to create dynamic bootstrap cards for recording players. Each card consists of a music-container with control-play and vinyl elements. I aim to have multiple bootstrap cards generated based on the data in the DB. However, only one control-play should be active at any given time. This means that when one control-play is already playing and another is clicked, the previous one should stop, and its vinyl should revert back to the album cover. Essentially, only one record player with vinyl animation is allowed to play simultaneously. Unfortunately, the ToggleClass and removeClass methods are not working as expected. Additionally, there are instances where both control-play items trigger the click event even with a single click (I attempted using proxy to address this issue, but it proved ineffective).
Error: Upon running the fiddle, if I click on control-play1 for the first time, the vinyl of both music-player-containers is displayed instead of just the first one, and they are hidden only when control-play1 is clicked again. When clicking on the second control-play, it displays solely the second vinyl. Such behavior is unconventional.
JS
function MusicPlayer(mp, id) {
this.mpc = mp;
this.initEvents(id);
}
MusicPlayer.prototype = {
initEvents: function(id) {
var obj = this;
obj.mpc.on('click', function(event) {
var others = $("div.music-player-container").not($(this));
$.each(others, function(index, value) {
if ($(value).is('.is-playing .vinyl')) {
$(value).removeClass('is-playing');
$(value).addClass('is-not-playing');
$(value).toggleClass('is-not-playing', true);
}
});
$(this).toggleClass('is-playing');
event.stopPropagation();
});
}
}
$(function() {
var $div = $('#content');
$(".control-play").bind('click', $.proxy(function(event) {
var cplay_clicked = $(event.target).attr('id');
var $musiPlayerContainer = $div.find('#' + event.target.dataset.id + 'mpc');
var mpc = new MusicPlayer($musiPlayerContainer, event.target.dataset.id);
$('div.music-player-container').removeClass('is-playing');
}, this));
});
CSS
/* Custom CSS */
[...]
HTML
<!-- Bootstrap cards -->
[...]
Creating an object of MusicPlayerContainer or utilizing bind() is crucial for proper functionality within the fiddle.
$(function() {
var $div = $('#content');
$(".control-play").on('click', function(event) {
var cplay_clicked = $(event.target).attr('id');
var $musiPlayerContainer = $div.find('#' + event.target.dataset.id + 'mpc');
// Code for toggling between play states
$('div.music-player-container').removeClass('is-playing');
});
});