使用 ":checked" 切换显示和隐藏 <iframe>
Show and Hide a <iframe> with a toggle using ":checked"
我被 JS 卡住了。我首先有 2 个按钮和 "onClick" 功能,但我现在想 "upgrade" 这些按钮。
使用此 JS,视频 show/hide 功能和切换幻灯片不起作用。
我想在选中开关时显示视频。
有人可以帮我处理 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>
只是不要在函数中包含 ("#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>
你太接近了,不需要这个函数,只要把事件放在它外面就可以了。
我建议在您的情况下使用 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>
我被 JS 卡住了。我首先有 2 个按钮和 "onClick" 功能,但我现在想 "upgrade" 这些按钮。 使用此 JS,视频 show/hide 功能和切换幻灯片不起作用。 我想在选中开关时显示视频。
有人可以帮我处理 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>
只是不要在函数中包含 ("#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>
你太接近了,不需要这个函数,只要把事件放在它外面就可以了。
我建议在您的情况下使用 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>