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

时间:2018-03-03 15:51:41

标签: javascript jquery html css

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

<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

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

enter image description here

直播应用就在这里:https://i2a.herokuapp.com/app/questionnaire/create/

在safari中,该选项不会作为按钮出现,但在Chrome中它会以按钮形式出现

有人可以帮我解决这个问题吗?谢谢。

1 个答案:

答案 0 :(得分:0)

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

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

首次点击时,它会删除.btn-default课程并添加.btn-success课程。第二次点击它会反过来。