Spiegeln nur einen Schalter zur Zeit

Question

Ich habe einen CSS/JavaScript-Code, der einfach einen Schalter von ein auf aus und so weiter, das Problem, das ich habe, ist, wenn ich einen anderen Schalter umlegen will, während eine Vorschau Schalter eingeschaltet ist Ich möchte, dass der Preview-Schalter oder die Schalter ausgeschaltet werden.

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

Sie müssen lediglich removeClass() auf die Schaltelemente verwenden, die nicht das sind, die angeklickt wurde. Sie können dies mit der Methode not() von jQuery erreichen. Beachten Sie auch, dass Sie die Logik prägnanter gestalten und DRY-Praktiken folgen können, indem Sie einen einzelnen Ereignishandler hinzufügen und das Element identifizieren, das das Ereignis über das Schlüsselwort this ausgelöst hat. Hier ein Beispiel:

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

Updated fiddle

Answer 2

versuchen dies,

Geige Link 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>

Hope this helfen .. :)