如何将按钮类从btn-default更改为btn-success

Question

我有这个选择多个框，选项为按钮。

<select multiple class="form-control" onchange="selectedIds(this)" >
                            <option value="" onclick="selectUnselect(this)" class="btn btn-default">
                                option1
                            </option>
                        </select>

通过jQuery，我点击了更改按钮类

$(document).ready(function () {
$(".form-control option").click(function () {
    if ($(this).hasClass('btn')) {
        $(this).toggleClass('btn-success');
    } else {
        $(this).toggleClass('btn-default');
    }
});

});

我想将所选选项的按钮颜色更改为绿色，例如btn btn-success中的btn btn-default类，当用户再次单击所选选项时，它应该返回到初始颜色，即btn btn-default

单击单个选项工作正常，但是当我选择多个选项时，前一个按钮的顶部颜色变为蓝色，就像这样

，

现场应用程序在这里：https://i2a.herokuapp.com/app/questionnaire/create/

在safari中，该选项不会作为按钮出现，但在Chrome中，它将作为按钮出现

任何人都可以帮我解决这个问题吗？谢谢。

Answer 1

在您的代码中，第一个条件将始终为true，因为.btn将始终位于元素上。试试这个：

$(document).ready(function () {
   $(".form-control option").click(function () {
       $(this).toggleClass('btn-success');
       $(this).toggleClass('btn-default');
   }
);

在第一次单击时，它将删除.btn-default类并添加.btn-success类。在第二次点击它将做相反的事情。