Question

我需要一点建议来解决这个问题：

我有6个按钮，当用户点击它时，“数据栏”会填满。这是通过更改数据条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切换到不同的高度。因为使用toggle类方法会发生这种情况：如果用户单击按钮1，则div将正确更改为“小”。但是，如果用户也单击按钮2，则该课程将被删除。我希望用户能够单击按钮1和2，以便div更改为“小”类。但是，如果用户使用UNCLICKS按钮1和2 ......应删除“小”类。

同样适用于其余按钮。因此，如果用户UNCLICKS 3和4，我应该删除'medium'类，以便div高度回到零，小或任何其他按钮被点击。

我创造了一个小提琴来说明我想要的东西： http://jsfiddle.net/NvdB31/M6jGJ/1/

Answer 1

使用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

Answer 2

您应该检查是否单击了其中一个按钮并且具有类button_clicked。知道了这一点，毕竟你可以使用toggleClass。

将您的JavaScript更改为以下内容：

$(".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。

编辑：作为奖励，我再次更新JSFiddle，使用更少的JavaScript，只使用一个按钮类而不是6个。

Jquery使用具有两个元素的切换类

2 个答案: