如何将按钮类从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的{​​{1}}类，当用户再次点击所选选项时，它应该返回到初始颜色，即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课程。第二次点击它会反过来。