改进 JQuery - 开关

Question

我想改进我的 JQuery 脚本。我从它开始，但我不知道我是否在做 "the correct way"。虽然代码按我想要的方式工作，但我认为我对所有这些 toggleClass

做错了

  $(".switch-one .switch-body").click(function() {

  $(".switch-one .switch-body").toggleClass("not-selected");
  $(".switch-two .switch-body").toggleClass("selected");
  $(".switch-one .switch-conmutter" ).toggleClass("off");
     $(".switch-two .switch-conmutter").toggleClass("on");
     
       
  });

  $(".switch-two .switch-body").click(function() {
  $(".switch-two .switch-body").toggleClass("selected");
  $(".switch-one .switch-body").toggleClass("not-selected");
  $( ".switch-two .switch-conmutter" ).toggleClass("on");
     $(".switch-one .switch-conmutter").toggleClass("off");
          
  });

label {
  left: 20px;
  position: relative;
  text-align: center;
  
}

.switch-one, .switch-two {
  height: 25px;
}

.switchers {
  font-size: 12px;
  float: left;
  width: 220px;
  
}

.switch-body {
  
  border-radius: 16px;
  background: #eee;
  height: 20px;
  width: 50px;
  float: right;
  z-index: 1;
}

.switch-conmutter {
  background: white;
  box-shadow: 1px 1px 3px #bbb, -1px -1px 3px #bbb;
  width: 20px;
  height: 20px;
  position: relative;
  border-radius: 50px;
  z-index: 2;
  left: 0;
  transition: ease-in-out 0.5s;
    
}

.switch-body:hover {
  cursor: pointer;
}

.selected {
  
  background: #F58E43;
  transition: background 0.5s linear;
  
}

.not-selected {
  
  background: #eee;
  transition: background 0.5s linear;
  
}

.on {
  left: 30px;
  transition: ease-in-out 0.5s;
}

.off {
  left: 0;
  transition: ease-in-out 0.5s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="switchers"> 
   <div class="switch-one"> 
   <label>SWITCH ONE</label>
   <div class="switch-body selected">
   <div id="switch-one-switch" class="switch-conmutter on"></div>
   </div>
   
     </div>

  <div class="switch-two"> 
   <label>SWITCH TWO</label>
   
   <div class="switch-body">
   <div id="switch-two-switch" class="switch-conmutter"></div>
   </div>
   
   </div>
  </div>

Answer 1

为此，我宁愿使用其他一些 js 框架（例如 knockoutJs）。看到这个片段。看起来简单多了是不是？

var SomeViewModel = function() {
  var self = this;
  self.flag = ko.observable(false);
  self.handler = function() {
    self.flag(!self.flag());
  };
};
ko.applyBindings(new SomeViewModel());

label {
  left: 20px;
  position: relative;
  text-align: center;
}
.switch-one,
.switch-two {
  height: 25px;
}
.switchers {
  font-size: 12px;
  float: left;
  width: 220px;
}
.switch-body {
  border-radius: 16px;
  background: #eee;
  height: 20px;
  width: 50px;
  float: right;
  z-index: 1;
}
.switch-conmutter {
  background: white;
  box-shadow: 1px 1px 3px #bbb, -1px -1px 3px #bbb;
  width: 20px;
  height: 20px;
  position: relative;
  border-radius: 50px;
  z-index: 2;
  left: 0;
  transition: ease-in-out 0.5s;
}
.switch-body:hover {
  cursor: pointer;
}
.selected {
  background: #F58E43;
  transition: background 0.5s linear;
}
.not-selected {
  background: #eee;
  transition: background 0.5s linear;
}
.on {
  left: 30px;
  transition: ease-in-out 0.5s;
}
.off {
  left: 0;
  transition: ease-in-out 0.5s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="switchers">
  <div class="switch-one" >
    <label>SWITCH ONE</label>
    <div class="switch-body selected" data-bind="css: {'not-selected' : flag, 'selected' : !flag() }, click: handler">
      <div id="switch-one-switch" class="switch-conmutter on" data-bind="css: {'off' : flag, 'on' : !flag() }"></div>
    </div>

  </div>

  <div class="switch-two">
    <label>SWITCH TWO</label>

    <div class="switch-body" data-bind="css: {'not-selected' : !flag(), 'selected' : flag }, click: handler">
      <div id="switch-two-switch" class="switch-conmutter" data-bind="css: {'on' : flag, 'off' : !flag() }"></div>
    </div>

  </div>
</div>

Answer 2

可能有更简单的方法，但这是使用 jQuery 并允许使用尽可能多的其他开关。

还假设您总是希望激活一个开关。

编辑：刚看到您要替换所有 toggle/add/remove 类。这可能不是一个好的答案。

$(".switch-body").click(function() {
    $('.switch-body').removeClass('selected');
    $(this).addClass('selected');
    $('.switch-body .switch-conmutter').addClass('off');
    $('.switch-body .switch-conmutter').removeClass('on');
    $(this).find('.switch-conmutter').removeClass('off');
    $(this).find('.switch-conmutter').addClass('on');     
});

label {
  left: 20px;
  position: relative;
  text-align: center;
}
.switch, .switch {
  height: 25px;
}
.switchers {
  font-size: 12px;
  float: left;
  width: 220px;
}
.switch-body {
  border-radius: 16px;
  background: #eee;
  height: 20px;
  width: 50px;
  float: right;
  z-index: 1;
}
.switch-conmutter {
  background: white;
  box-shadow: 1px 1px 3px #bbb, -1px -1px 3px #bbb;
  width: 20px;
  height: 20px;
  position: relative;
  border-radius: 50px;
  z-index: 2;
  left: 0;
  transition: ease-in-out 0.5s;
}
.switch-body:hover {
  cursor: pointer;
}
.selected {
  background: #F58E43;
  transition: background 0.5s linear;
}
.not-selected {
  background: #eee;
  transition: background 0.5s linear;
}
.on {
  left: 30px;
  transition: ease-in-out 0.5s;
}
.off {
  left: 0;
  transition: ease-in-out 0.5s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="switchers"> 
    <div class="switch"> 
     <label>SWITCH ONE</label>
  <div class="switch-body selected">
   <div class="switch-conmutter on"></div>
  </div>
 </div>

    <div class="switch"> 
     <label>SWITCH TWO</label>
  <div class="switch-body selected">
   <div class="switch-conmutter"></div>
  </div>
 </div>

    <div class="switch"> 
     <label>SWITCH THREE</label>
  <div class="switch-body selected">
   <div class="switch-conmutter"></div>
  </div>
 </div>

    <div class="switch"> 
     <label>SWITCH FOUR etc...</label>
  <div class="switch-body selected">
   <div class="switch-conmutter"></div>
  </div>
 </div>
</div>

改进 JQuery - 开关

Improve JQuery - Switches

css

jquery

toggleclass