Bootstrap 开关 - 如何根据开关状态更改 div 的样式？

Question

我是 jQuery 的新手，我运行遇到了 Bootstrap Switch 的问题。

这是我的 fiddle：http://jsfiddle.net/egqjvz7b/3/

我有两个 div 具有相同的 class 但不同的 ID。两个 div 下方都有切换开关。我想要做的是当我切换第一个切换时，第一个 div class 从 'box' 更改为 'selectedbox' 然后如果我切换到第二个切换第一个 div 返回原来的 class，第二个 div 更改为 'selectedbox'。

在 'box' 和 'selectedbox' 之间只有框阴影不同所以我也很乐意改变它。

希望我说的很清楚，希望有人能提供帮助。干杯！

html

<body>

<div class="box" id="option1">
<p>Option 1</p>
</div>

<input type="radio" name="exampleToggle" id="toggleOption1" data-on-text="Selected" data-off-text="Select" data-on-color="success" data-off-color="primary" data-inverse="true">

<div class="box" id="option2">
<p>Option 2</p>
</div>

<input type="radio" name="exampleToggle" id="toggleOption2" data-on-text="Selected" data-off-text="Select" data-on-color="success" data-off-color="primary" data-inverse="true">

</body>

css

body{
margin: 30px;
}

.box{
background: rgba(255, 255, 255, 0.6);
border-radius: 5px;
border-top: solid 3px #18bc9c;
box-shadow: 0px 2px 5px #2c3e50;
padding:20px;
height:100px;
width:100px;
margin: 30px 0;
}

.selectedbox{
background: rgba(255, 255, 255, 0.6);
border-radius: 5px;
border-top: solid 3px #18bc9c;
box-shadow: 0px 0px 20px #18bc9c;
padding:20px;
height:100px;
width:100px;
margin: 30px 0;
}

js

$("[name='exampleToggle']").bootstrapSwitch();

Answer 1

jQuery toggleClass 或 addClass 和 removeClass 方法应该有效。看起来 bootstrap-switch 中有一个 onSwitchChange 方法应该给你事件触发器，所以像这样：

$("#toggleOption1").onSwitchChange(function(evt, state) {
   $('#option1").toggleClass('selectedBox');
});

其他选项也类似。希望这有帮助。

Answer 2

这个很简单DEMO你可以试试

将 data-id 添加到单选按钮，例如：

<input type="radio" name="exampleToggle" id="toggleOption1"  data-id="#option1"...../>
<input type="radio" name="exampleToggle" id="toggleOption2"  data-id="#option2"...../>

和

$("[name='exampleToggle']").bootstrapSwitch({
    onSwitchChange: function(event, state){
        var id = $(this).data('id');
       $(id + ', .selectedbox').toggleClass('box selectedbox');

    }
});

Answer 3

$("[name='exampleToggle']").on('switchChange.bootstrapSwitch',     function(event, state) {    
    $(this).parent().parent().prev('.box').toggleClass("boxSelected");    
});

bootstrap 将开关绕了几次，所以你需要向上遍历。如果标记要保持不变，您可以这样做。

Bootstrap 开关 - 如何根据开关状态更改 div 的样式？

Bootstrap Switch - How can i change a div`s style depending on the toggle`s state?

jquery

twitter-bootstrap

bootstrap-switch