時刻にスイッチを1つだけ反転する

Question

私は、スイッチをオンからオフに切り替えるCSS/javascriptコードを持っています。 プレビュースイッチがオンのときに別のスイッチを反転させたいときです私はプレビュースイッチまたはスイッチをオフにしたい。

https://jsfiddle.net/uktoek59/

trigger_switch($("#firstSwitch"), 'first switch has been trigger'); 
trigger_switch($("#secondSwitch"), 'second switch has been trigger'); 
trigger_switch($("#thirdSwitch"), 'third switch has been trigger'); 
trigger_switch($("#forthSwitch"), 'forth switch has been trigger'); 

function trigger_switch(switchId, output) { 
    $(switchId).click(function() { 
    $(switchId).toggleClass("switchOn"); 
    alert(output); 
    }); 
}; 

Answer 1

あなたは、単にクリックされたものではないですスイッチ素子にremoveClass()を使用する必要があります。これは、jQueryのnot()メソッドを使用して実現できます。また、ロジックをもっと簡潔にして、単一のイベントハンドラをアタッチし、thisキーワードでイベントを発生させた要素を特定することで、DRYプラクティスに従うこともできます。ここでは例です：

$('.switch').click(function() { 
    $('.switch').toggleClass('switchOn').not(this).removeClass('switchOn'); 
}); 

Updated fiddle

Answer 2

ホープ、このヘルプhttps://jsfiddle.net/he8zsbee/1/

trigger_switch($("#firstSwitch"), 'first switch has been trigger'); 
 
    trigger_switch($("#secondSwitch"), 'second switch has been trigger'); 
 
    trigger_switch($("#thirdSwitch"), 'third switch has been trigger'); 
 
    trigger_switch($("#forthSwitch"), 'forth switch has been trigger'); 
 

 
    function trigger_switch(switchId, output) { 
 
     $(switchId).click(function() { 
 
     $('.switchOn').toggleClass("switchOn"); 
 
     switchId.addClass("switchOn"); 
 
     alert(output); 
 
     }); 
 
    };

.switch { 
 
     width: 62px; 
 
     height: 32px; 
 
     background: #e5e5e5; 
 
     z-index: 0; 
 
     margin: 0; 
 
     padding: 0; 
 
     appearance: none; 
 
     border: none; 
 
     cursor: pointer; 
 
     position: relative; 
 
     border-radius: 16px; 
 
     -moz-border-radius: 16px; 
 
     -webkit-border-radius: 16px; 
 
    } 
 
    .switch:before { 
 
     content: ' '; 
 
     position: absolute; 
 
     left: 1px; 
 
     top: 1px; 
 
     width: 60px; 
 
     height: 30px; 
 
     background: #fff; 
 
     z-index: 1; 
 
     border-radius: 16px; 
 
     -moz-border-radius: 16px; 
 
     -webkit-border-radius: 16px; 
 
    } 
 
    .switch:after { 
 
     content: ' '; 
 
     height: 29px; 
 
     width: 29px; 
 
     border-radius: 28px; 
 
     background: #fff; 
 
     position: absolute; 
 
     z-index: 2; 
 
     top: 1px; 
 
     left: 1px; 
 
     -webkit-transition-duration: 300ms; 
 
     transition-duration: 300ms; 
 
     -webkit-box-shadow: 0 2px 5px #999999; 
 
     box-shadow: 0 2px 5px #999999; 
 
    } 
 
    .switchOn, 
 
    .switchOn:before { 
 
     background: #4cd964 !important; 
 
    } 
 
    .switchOn:after { 
 
     left: 32px !important; 
 
    } 
 
    .switch { 
 
     width: 100px; 
 
     height: 52px; 
 
     background: #e5e5e5; 
 
     z-index: 0; 
 
     margin: 0; 
 
     padding: 0; 
 
     appearance: none; 
 
     border: none; 
 
     cursor: pointer; 
 
     position: relative; 
 
     border-radius: 53px; 
 
     -moz-border-radius: 53px; 
 
     -webkit-border-radius: 53px; 
 
     display: inline-block; 
 
    } 
 
    .switch:before { 
 
     content: ' '; 
 
     position: absolute; 
 
     left: 2px; 
 
     top: 2px; 
 
     width: 98px; 
 
     height: 50px; 
 
     background: #e5e5e5; 
 
     z-index: 1; 
 
     border-radius: 52px; 
 
     -moz-border-radius: 52px; 
 
     -webkit-border-radius: 52px; 
 
    } 
 
    .switch:after { 
 
     content: ' '; 
 
     height: 33px; 
 
     width: 33px; 
 
     border-radius: 52px; 
 
     background: #FFFFFF; 
 
     position: absolute; 
 
     z-index: 2; 
 
     top: 8px; 
 
     left: 6px; 
 
     -webkit-transition-duration: 300ms; 
 
     transition-duration: 300ms; 
 
     -webkit-box-shadow: 0 2px 5px #999999; 
 
     box-shadow: 0 2px 5px #d1c7cf; 
 
    } 
 
    .switchOn, 
 
    .switchOn:before { 
 
     background: #00DE68 !important; 
 
    } 
 
    .switchOn:after { 
 
     left: 62px !important; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="filters" class="vertical medium-horizontal menu"> 
 
    <li> 
 
    <p>first switch</p> 
 
    <div class="switch" id="firstSwitch"></div> 
 
    </li> 
 
    <li> 
 
    <p>second switch</p> 
 
    <div class="switch" id="secondSwitch"></div> 
 
    </li> 
 
    <li> 
 
    <p>third switch</p> 
 
    <div class="switch" id="thirdSwitch"></div> 
 
    </li> 
 
    <li> 
 
    <p>forth switch</p> 
 
    <div class="switch" id="forthSwitch"></div> 
 
    </li> 
 
</ul> 
 
<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>

フィドルリンク、これを試して.. :)