有两个元素

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