iframeを追加してコピーを作成する

Question

このjQueryコードがありますが、実行しようとすると正式な状態に戻るとblok2のコピーが作成されます。誰かがこの問題を解決する方法を知っていますか？

私のブロークをクリックするたびに、そのビデオは拡大され、それが想定されているようにビデオに表示されます。しかし、それを縮小するためにクリックすると、iframeのコピーが作成され、隠すことはありません。私はいくつかの解決策を試しましたが、iframeを再現する方法はわかりません。

$(document).ready(function() { 
 
    $(".blok2").click(function() { 
 
    $(".codeacademy").toggle(); 
 
    }); 
 
    $(".blok2").click(function() { 
 
    $("<iframe />", { 
 
     src: "https://www.youtube.com/embed/07Q6aUPfqkM" 
 
    }).appendTo(".blok2"); 
 
    }); 
 
});

.rij1 { 
 
    display: flex; 
 
    width: 500px; 
 
} 
 
.rij2 { 
 
    display: flex; 
 
    width: 500px; 
 
} 
 
.blok1 { 
 
    background-color: cadetblue; 
 
    height: 250px; 
 
    width: 250px; 
 
} 
 
.blok2 { 
 
    background-color: palevioletred; 
 
    height: 250px; 
 
    width: 250px; 
 
} 
 
.blok3 { 
 
    background-color: darkseagreen; 
 
    height: 250px; 
 
    width: 250px; 
 
} 
 
.blok4 { 
 
    background-color: coral; 
 
    height: 250px; 
 
    width: 250px; 
 
} 
 
img.codeacademy { 
 
    display: block; 
 
    width: 100%; 
 
    height: auto; 
 
    content: url("http://s3.amazonaws.com/codecademy-blog/assets/logo_blue_dark.png"); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='rij1'> 
 
    <div class='blok1'></div> 
 
    <div class='blok2'> 
 
    <img class="codeacademy"> 
 
    </div> 
 
</div> 
 

 
<div class='rij2'> 
 
    <div class='blok3'></div> 
 
    <div class='blok4'></div> 
 
</div>

Answer 1

問題は、blok2要素に取り付けられた2つのクリックイベントハンドラを持っているという事実によるものである - 彼らは両方の各クリックで実行。彼らはあなたが期待しているように、連続したクリックで切り替えません。

この問題を解決するには、が既にblok2要素内にあるかどうかをチェックする単一のクリックイベントハンドラを作成することができます。存在する場合は、それを削除し、codecademyイメージを表示します。そうでない場合は、iframeを作成してイメージを非表示にします。このような何か：それは助けた場合

$(document).ready(function() { 
 
    $(".blok2").click(function() { 
 
    var $iframe = $(this).find('iframe'); 
 
    if ($iframe.length) { 
 
     $(".codeacademy").show(); 
 
     $iframe.remove(); 
 
    } else { 
 
     $(".codeacademy").hide(); 
 
     $("<iframe />", { 
 
     src: "https://www.youtube.com/embed/07Q6aUPfqkM" 
 
     }).appendTo(".blok2"); 
 
    } 
 
    }); 
 
});

.rij1 { 
 
    display: flex; 
 
    width: 500px; 
 
} 
 
.rij2 { 
 
    display: flex; 
 
    width: 500px; 
 
} 
 
.blok1 { 
 
    background-color: cadetblue; 
 
    height: 250px; 
 
    width: 250px; 
 
} 
 
.blok2 { 
 
    background-color: palevioletred; 
 
    height: 250px; 
 
    width: 250px; 
 
} 
 
.blok3 { 
 
    background-color: darkseagreen; 
 
    height: 250px; 
 
    width: 250px; 
 
} 
 
.blok4 { 
 
    background-color: coral; 
 
    height: 250px; 
 
    width: 250px; 
 
} 
 
img.codeacademy { 
 
    display: block; 
 
    width: 100%; 
 
    height: auto; 
 
    content: url("http://s3.amazonaws.com/codecademy-blog/assets/logo_blue_dark.png"); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='rij1'> 
 
    <div class='blok1'></div> 
 
    <div class='blok2'> 
 
    <img class="codeacademy"> 
 
    </div> 
 
</div> 
 

 
<div class='rij2'> 
 
    <div class='blok3'></div> 
 
    <div class='blok4'></div> 
 
</div>