0

私は jQuery の初心者で、Bootstrap Switch で問題が発生しました。

ここに私のフィドルがあります：http://jsfiddle.net/egqjvz7b/3/

同じクラスで ID が異なる 2 つの div があります。両方の div の下にトグル スイッチがあります。私がやりたいことは、最初のトグルを切り替えると、最初のdivクラスが「ボックス」から「selectedbox」に変わり、2番目のトグルに切り替えると、最初のdivが元のクラスに戻り、2番目の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 
$("[name='exampleToggle']").on('switchChange.bootstrapSwitch',     function(event, state) {    
    $(this).parent().parent().prev('.box').toggleClass("boxSelected");    
});

ブートストラップはスイッチを数回ラップするため、トラバースする必要があります。マークアップが同じままである場合は、この方法で行うことができます。

于 2015-06-23T15:15:02.910 に答える