Question

我在Bootstrap切换器插件（https://github.com/nostalgiaz/bootstrap-switch）中自定义了一个复选框。如何在切换时将绿色变为红色？试过这个：

<div class="container">
  <div id="main-arr">How are you my friend?</div>
  <div id="main-arr__last"></div>
</div>

$(document).ready(function() {

var sometext = $('#main-arr').text();
var someArr = sometext.split(' ');

for ( var i = 0; i < someArr.length; i++ ) {
    if ( someArr[i] === 'you' || someArr[i] === 'he' || someArr[i] === 'she' ) {
        var newArr1 = someArr.slice(0, i);
        var newArr2 = someArr.slice(i + 1, someArr.length);
        newArr1 = newArr1.join(' ');
        newArr2 = newArr2.join(' ');
        var word = 'error!';
        console.log(newArr1);
        console.log(newArr2);
        $('#main-arr__last').html(newArr1 + '<span class="red">' + ' ' + word + ' ' + '</span>' + newArr2);
    }
}

我的例子：http://codepen.io/rinatoptimus/pen/JEOjjp

Answer 1

您可以使用选项onColor和/或offColor。首先，您必须以这种方式定义css类：

.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-highlight {
  background-color: red !important;
}

然后，您可以在初始化中添加选项onColor或offColor：

$("[name='my-checkbox']").bootstrapSwitch('onColor','highlight');

我试过你的示例代码，但它并没有完全发挥作用。我不知道，你在bootstrap-switch的标准代码中改变了什么。

更新

要同时设置onColor和offColor，您可以这样定义：

$("[name='my-checkbox']").bootstrapSwitch(
'onColor':'highlight',
'offColor':'warning'
);

如何在bootstrap切换器自定义复选框中更改背景颜色？

1 个答案: