javascript - 使用 Jquery css 按下时重置类

Question

我正在开发一个音频播放器，它可以防止用户右键单击将目标另存为...，同时还可以使用 Jquery 隐藏文件路径。它还只允许一次播放一种声音。

到目前为止，一切正常，除非单击当前正在播放的声音，类不会重置为播放(绿色)

到目前为止，使用 Jsfiddle: http://jsfiddle.net/pt3cx1eo/12/

Jquery:

     $(".play").on('click',function(){
         var key = $(this).attr('key');     
         EvalSound(key);
         $(".play").removeClass("pause"); // somewhere here is where it needs to be changed / fixed I believe 
         $( this ).toggleClass( "pause" );
     });

    var thissound = new Audio();
    var currentKey;
        function EvalSound(key) {



       if(currentKey !== key)
         thissound.src = "http://designlab360.org/fhi/splash/dev2/audio/" + key + ".mp3";      
         currentKey = key;

         if (thissound.paused)
                    thissound.play();
            else
                thissound.pause();
                thissound.currentTime = 0;
                 currentPlayer = thissound;




        }

CSS:

.play
{
color:green;    
}

.pause

{
color:red;  
}

HTML:

<p><span class="play" key="wash-song1_2">Play</span></p>    
<p><span class="play" key="wash-song2_2">Play</span></p>    
<p><span class="play" key="wash-song3_2">Play</span></p> 

Answer 1

问题是，在为相关的点击元素切换暂停类之前，您总是要从每个具有播放类的元素中删除暂停类。

我已对其进行更改，以便您仅删除所有不是被点击元素的其他元素。

例子:

$(".play").on('click',function(){
     var key = $(this).attr('key');     
     EvalSound(key);
     var this_play = $(this);
     $(".play").each(function() {
         if ($(this)[0] != this_play[0]) {
             $(this).removeClass("pause");
         }
     });
     $( this ).toggleClass( "pause" );
 });

它在这里工作:http://jsfiddle.net/wyfjdgyb/1/