显示和隐藏 使用“：checked”进行切换

Question

我被JS困住了。我首先有2个按钮和“onClick”功能，但我想现在“升级”这些按钮到切换。有了这个JS，视频显示/隐藏功能和切换幻灯片不起作用。我想在检查开关时显示视频。

有人可以帮我搞JS吗？

function showVideo(){
$("#video").hide();
$("#cb1").click(function() {
    if($(this).is(":checked")) {
        $("#video").show(300);
    } else {
        $("#video").hide(200);
    }
});
}

.tgl {
  display: none;
}

.tgl + .tgl-btn {
  outline: 0;
  display: block;
  width: 4em;
  height: 2em;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.tgl + .tgl-btn:after, .tgl + .tgl-btn:before {
  position: relative;
  display: block;
  content: "";
  width: 50%;
  height: 100%;
}

.tgl + .tgl-btn:after {
  left: 0;
}

.tgl + .tgl-btn:before {
  display: none;
}

.tgl:onClick + .tgl-btn:after {
  left: 50%;
}

.tgl-light + .tgl-btn {
  background: #f0f0f0;
  border-radius: 2em;
  padding: 2px;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
}

.tgl-light + .tgl-btn:after {
  border-radius: 50%;
  background: #fff;
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
}

.tgl-light:checked + .tgl-btn {
  background: #9FD6AE;
} 

<input class="tgl tgl-light" id="cb1" type="checkbox"/>
<label class="tgl-btn" for="cb1"></label>

<iframe id="video" style='width:360px; height: 190px; border: none' src="https://www.youtube.com/embed/owsfdh4gxyc"></iframe>

Answer 1

只是不要在函数中包含("#cb1").click(...。 showVideo()实际上从未在任何地方调用，因此不添加事件处理程序：

$("#video").hide();
$("#cb1").click(function() {
    console.log($(this).is(":checked"));
    if($(this).is(":checked")) {
        $("#video").show(300);
    } else {
        $("#video").hide(200);
    }
});

.tgl {
  display: none;
}

.tgl + .tgl-btn {
  outline: 0;
  display: block;
  width: 4em;
  height: 2em;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.tgl + .tgl-btn:after, .tgl + .tgl-btn:before {
  position: relative;
  display: block;
  content: "";
  width: 50%;
  height: 100%;
}

.tgl + .tgl-btn:after {
  left: 0;
}

.tgl + .tgl-btn:before {
  display: none;
}

.tgl:onClick + .tgl-btn:after {
  left: 50%;
}

.tgl-light + .tgl-btn {
  background: #f0f0f0;
  border-radius: 2em;
  padding: 2px;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
}

.tgl-light + .tgl-btn:after {
  border-radius: 50%;
  background: #fff;
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
}

.tgl-light:checked + .tgl-btn {
  background: #9FD6AE;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="tgl tgl-light" id="cb1" type="checkbox"/>
<label class="tgl-btn" for="cb1"></label>

<iframe id="video" style='width:360px; height: 190px; border: none' src="https://www.youtube.com/embed/owsfdh4gxyc"></iframe>

Answer 2

你是如此接近，不需要功能只是把事件放在它外面它会工作。

我建议在你的情况下使用toggle()而不是条件hide()/show()，如：

$("#cb1").click(function() {
   $("#video").toggle(300);
});

$("#video").hide();

$("#cb1").click(function() {
   $("#video").toggle(300);
});

.tgl {
  display: none;
}

.tgl+.tgl-btn {
  outline: 0;
  display: block;
  width: 4em;
  height: 2em;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.tgl+.tgl-btn:after,
.tgl+.tgl-btn:before {
  position: relative;
  display: block;
  content: "";
  width: 50%;
  height: 100%;
}

.tgl+.tgl-btn:after {
  left: 0;
}

.tgl+.tgl-btn:before {
  display: none;
}

.tgl:onClick+.tgl-btn:after {
  left: 50%;
}

.tgl-light+.tgl-btn {
  background: #f0f0f0;
  border-radius: 2em;
  padding: 2px;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
}

.tgl-light+.tgl-btn:after {
  border-radius: 50%;
  background: #fff;
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
}

.tgl-light:checked+.tgl-btn {
  background: #9FD6AE;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input class="tgl tgl-light" id="cb1" type="checkbox" />
<label class="tgl-btn" for="cb1"></label>

<iframe id="video" style='width:360px; height: 190px; border: none' src="https://www.youtube.com/embed/owsfdh4gxyc"></iframe>