有兩個元素

Question

使用jQuery的切換類，我需要有一些小技巧在這裏解決這個問題：

我有6個按鈕，當用戶點擊它，一個「數據條」填滿。這是通過改變那個databar div的高度來完成的。

If user clicks on button1 or 2 -> Databar changes to small 
If user clicks on button 3 or 4 -> Databar fills up to medium 
If user clicks on 5 or 6 -> Databar fills to large 

問題是：我不能使用toggleClass將div切換到不同的高度。因爲使用切換類方法會發生這種情況： 如果用戶單擊按鈕1，div將正確更改爲「小」。但是，如果用戶也點擊了按鈕2，課程將被刪除。 我希望用戶能夠單擊按鈕1和2，以便div更改爲「小」類。但是，如果用戶UNCLICKS按鈕1和2 ...'小'類應該被刪除。

這同樣適用於按鈕的其餘部分。因此，如果用戶UNCLICKS 3和4，我應該刪除'中等'類，以使div高度回到零，小或任何其他按鈕被點擊。

我創建了一個小提琴來說明什麼，我想： http://jsfiddle.net/NvdB31/M6jGJ/1/

Answer 1

您應該檢查是否其中一個按鈕被點擊並具有類button_clicked。知道這一點，畢竟你可以使用toggleClass。

你的JavaScript更改爲以下：你JSFiddle的

$(".button1, .button2").click(function() { 
    $(this).toggleClass("button_clicked"); 
    var show = $(".button1, .button2").hasClass("button_clicked"); 
    $(".databar").toggleClass("databar_small", show); 
}); 

$(".button3, .button4").click(function() { 
    $(this).toggleClass("button_clicked"); 
    var show = $(".button3, .button4").hasClass("button_clicked"); 
    $(".databar").toggleClass("databar_medium", show); 
}); 

$(".button5, .button6").click(function() { 
    $(this).toggleClass("button_clicked"); 
    var show = $(".button5, .button6").hasClass("button_clicked"); 
    $(".databar").toggleClass("databar_large", show); 
}); 

更新。

編輯：作爲獎勵，我已經更新了JSFiddle再次，要少用JavaScript和利用只有一個按鈕類，而不是6

Answer 2

使用hasClass功能檢查class存在或不存在，如果去掉類，否則添加databar_small類。就像下面的代碼，

$(".button1, .button2").click(function() { 
    if($(".databar").hasClass("databar_small")){ 
     $(".databar").removeClass("databar_small"); 
    } 
    else{ 
     $(".databar").addClass("databar_small"); 
    } 
    $(this).toggleClass("button_clicked"); 
}); 

DEMO