"：checked"を使用して<iframe>のトグルを表示して非表示にする

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>