具有简单html的自定义切换开关

Question

我正在跟踪一些示例来创建自定义切换。

此切换的HTML看起来非常陌生。

我正在寻找这样的HTML表达式：

 <input type="checkbox" class="onoffswitch-checkbox" id="inline"> 

相反，我有这个：

    mixin model
  section&attributes(attributes)= name
    .checkbox
      input(type='checkbox')
      label
- var x  =1
  +model(class="model-1")

https://codepen.io/anon/pen/WBEyWz

Answer 1

我认为那个陌生的代码来自Vue。 Vue是一个类似React或Angular的JavaScript框架-因此我假设您正在为切换按钮寻找HTML / CSS解决方案。以下演示是对here找到的示例的改编。

:root {
  font: 700 16px/1 Verdana;
}

.switch {
  position: relative;
  display: inline-block;
  width: 3.75em;
  height: 2.125em;
}

.control {
  display: none
}

.slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 2.125em;
  background-color: #ccc;
  cursor: pointer;
  transition: .4s;
}

.slider::before {
  content: "";
  position: absolute;
  height: 1.625em;
  width: 1.625em;
  left: 0.25em;
  bottom: 0.25em;
  border-radius: 50%;
  background: #fff;
  transition: .4s;
}

.control:checked+.switch .slider {
  background: rgba(128, 255, 128, 1);
}

.control:checked+.switch .slider::before {
  transform: translateX(1.625em);
}

<input id='control' class='control' type="checkbox">
<label class="switch" for='control'>
  <output class="slider" for='control'></output>
</label>

Answer 2

类似的事情可能会让您入门：

$('#inline').click(function(){
    $('#mydiv').toggleClass('bgred');
});

演示：

$('#inline').click(function(){
  $('#mydiv').toggleClass('bgred');
});

#inline{transform:scale(1.8);}
#mydiv{margin-top:50px;height:100px;width:250px;background:blue;}
.bgred{background:red !important;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

Check: <input type="checkbox" class="onoffswitch-checkbox" id="inline">

<div id="mydiv"></div>

---

这是另一个带有标签的示例-使用变量来跟踪按钮状态（而不是依赖jQuery的toggleClass方法）：

Demo The Seconde：

var outer_scope_var = false;
$('#inline').click(function(){
    if (outer_scope_var){
        $('#mydiv').removeClass('bgred');
        outer_scope_var = false;
    }else{
        $('#mydiv').addClass('bgred');
        outer_scope_var = true;
    }
});

#inline{transform:scale(1.8);}
#mydiv{margin-top:50px;height:100px;width:250px;background:blue;}
.bgred{background:red !important;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<label for="inline">Click Words or Box:</label> 
<input type="checkbox" class="onoffswitch-checkbox" id="inline">

<div id="mydiv"></div>