Question

我对jQuery很新，我遇到了Bootstrap Switch的问题。

我有两个具有相同类但不同ID的div。两个div都有拨动开关。我想要做的是当我切换第一个切换时，第一个div类从'box'变为'selectedbox'然后如果我切换到第二个切换，第一个div返回到原始类，第二个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 Switch - 如何根据切换状态更改div的样式？

3 个答案: