0

我对 jQuery 相当陌生,但在使用 Bootstrap Switch 时遇到了问题。

这是我的小提琴:http: //jsfiddle.net/egqjvz7b/3/

我有两个具有相同类但不同 id 的 div。两个 div 下方都有拨动开关。我想要做的是,当我切换第一个切换时,第一个 div 类从“box”更改为“selectedbox”,然后如果我切换到第二个切换,第一个 div 将返回原始类,第二个 div 更改为“选中框”。

在 'box' 和 'selectedbox' 之间,只有 box-shadow 是不同的,所以我也很乐意改变它。

希望我很清楚,有人可以提供帮助。干杯!

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();
4

3 回答 3

0

jQuerytoggleClassaddClassandremoveClass方法应该可以工作。看起来有一个onSwitchChange来自 bootstrap-switch 的方法应该给你事件触发器,所以是这样的:

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

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

于 2015-06-23T04:28:51.127 回答
0

这是一个简单的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');

    }
});
于 2015-06-23T05:05:05.240 回答
0
$("[name='exampleToggle']").on('switchChange.bootstrapSwitch',     function(event, state) {    
    $(this).parent().parent().prev('.box').toggleClass("boxSelected");    
});

bootstrap 将开关包裹了几次,因此您需要向上遍历。如果标记保持不变,您可以这样做。

于 2015-06-23T15:15:02.910 回答