切換類不工作

Question

我有三個播放按鈕，一個簡單的自定義播放器，以這種方式上市：

<div> 
    <div class="gs-player"> 
    <div id="gs1" onclick="play(309689093)" class="fa fa-3x fa-play"></div> 
    </div> 
    <div class="gs-player"> 
    <div id="gs2" onclick="play(316017522)" class="fa fa-3x fa-play"></div> 
    </div> 
    <div class="gs-player"> 
    <div id="gs3" onclick="play(315363199)" class="fa fa-3x fa-play"></div> 
    </div> 
</div> 

我想這樣做，當我點擊他們每個人的是：

1. 刪除所有活動類（我用fa-pause）
2. 切換與fa-pause的div我點擊

類

我做了這樣：

$(document).ready(function() { 
    $('.fa-play').click(function() { 
     $('.fa-pause').removeClass('fa-pause'); 
     $(this).toggleClass('fa-pause');   
    }); 
}); 

基本上它的工作原理除了切換功能精細，看起來更像是一個addClass代替。如果我再次點擊活動的div，它不會刪除fa-pause。

JSFiddle中的行爲更清晰。

另外，有沒有辦法做到這一點，而不使用框架？

Answer 1

您正在移除該類，然後重新打開它。添加.not(this)，以避免這種情況。它將確保修改的元素不會是當前被點擊的元素。

$(document).ready(function() { 
 
    $('.fa-play').click(function() { 
 
     $('.fa-pause').not(this).removeClass('fa-pause'); 
 
     $(this).toggleClass('fa-pause');   
 
    }); 
 
}); 
 

 
function play() {}; //remove this line, I used this just to avoid error (because we don't have your full code).

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" /> 
 

 
<div> 
 
    <div class="gs-player"> 
 
    <div id="gs1" onclick="play(309689093)" class="fa fa-3x fa-play"></div> 
 
    </div> 
 
    <div class="gs-player"> 
 
    <div id="gs2" onclick="play(316017522)" class="fa fa-3x fa-play"></div> 
 
    </div> 
 
    <div class="gs-player"> 
 
    <div id="gs3" onclick="play(315363199)" class="fa fa-3x fa-play"></div> 
 
    </div> 
 
</div>

Answer 2

不要自己做$('.fa-pause').removeClass('fa-pause');，切換是針對提到：

$(document).ready(function() { 
    $('.fa-play').click(function() { 
     $('.fa-pause').not(this).removeClass('fa-pause'); 
     $(this).toggleClass('fa-pause');   
    }); 
});