使用 Jquery css 按下时重置类

Posted 2023-02-25

【中文标题】使用 Jquery css 按下时重置类

【英文标题】：Reset class when pressed using Jquery css

【发布时间】：2015-09-21 04:08:39

【问题描述】：

我正在开发一种音频播放器，该播放器可防止用户右键单击将目标另存为...，同时还使用 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> 

【参考方案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/