javascript - 重新切换/重新添加 jquery 中变量的类

Question

我正在为音频播放器开发一个主控制面板，一切正常，除了如果我在一个轨道已经在播放时播放另一首轨道，然后在主控制上单击“停止”，然后在主控制上再次单击“播放”，则它不会将类“.pause”添加回轨道。JsFiddle:http://jsfiddle.net/jeffd/2fjnmdkb/15/

    $(".play").on('click', function () {
     var key = $(this).attr('key');
     var nowplay = $(this); // variable for now playing class .play
     EvalSound(this, key);
     $(".play").not(this).removeClass("pause");     
     $(this).toggleClass("pause");
     $(this).hasClass("pause") ? $(".playerbottom").addClass("pausebottom") : $(".playerbottom").removeClass("pausebottom");
 $(".playerbottom").on('click', function () {
   nowplay.toggleClass("pause");   
$(".play").not(nowplay).removeClass("pause");

 }); 

});
 var thissound = new Audio();
 var currentKey;
 function EvalSound(el, key) {
     thissound.addEventListener('ended', function () {
         // done playing
         $(el).removeClass("pause");
         $(".playerbottom").removeClass("pausebottom");
     });
     if (currentKey !== key) thissound.src = "http://99centbeats.com/1e4cb5f584d055a0992385c1b2155786/" + key;
     currentKey = key;
     if (thissound.paused) thissound.play();
     else thissound.pause();
     currentPlayer = thissound;
 }

$(".volume_slider").slider({
    value  : 75,
    step   : 1,
    range  : 'min',
    min    : 0,
    max    : 100,
    slide  : function(){
        var value = $(".volume_slider").slider("value");
        thissound.volume = (value / 100);
    }
}); 
 $(".playerbottom").on('click', function () {
     $(this).toggleClass("pausebottom");
     if (thissound.paused) thissound.play();
     else thissound.pause();

 });

Answer 1

将 nowplay 设置为全局变量后，它可以工作:window.nowplay = $(this);

工作解决方案:http://jsfiddle.net/jeffd/2gbz7agp/

    $(".play").on('click', function () {
     var key = $(this).attr('key');
     window.nowplay = $(this); // variable for now playing class .play
     EvalSound(this, key);
     $(".play").not(this).removeClass("pause");     
     $(this).toggleClass("pause");
     $(this).hasClass("pause") ? $(".playerbottom").addClass("pausebottom") : $(".playerbottom").removeClass("pausebottom");
 $(".playerbottom").on('click', function () {
      $(this).hasClass("pausebottom") ? nowplay.addClass("pause") : nowplay.removeClass("pause");

 }); 

});
 var thissound = new Audio();
 var currentKey;
 function EvalSound(el, key) {
     thissound.addEventListener('ended', function () {
         // done playing
         $(el).removeClass("pause");
         $(".playerbottom").removeClass("pausebottom");
     });
     if (currentKey !== key) thissound.src = "http://99centbeats.com/1e4cb5f584d055a0992385c1b2155786/" + key;
     currentKey = key;
     if (thissound.paused) thissound.play();
     else thissound.pause();
     currentPlayer = thissound;
 }

$(".volume_slider").slider({
    value  : 75,
    step   : 1,
    range  : 'min',
    min    : 0,
    max    : 100,
    slide  : function(){
        var value = $(".volume_slider").slider("value");
        thissound.volume = (value / 100);
    }
}); 
 $(".playerbottom").on('click', function () {
     $(this).toggleClass("pausebottom");
     if (thissound.paused) thissound.play();
     else thissound.pause();

 });