iframe追加製作副本

Question

我有這個jQuery代碼，但是當我嘗試執行它時，它會在返回到正式狀態時複製blok2。有人知道如何解決這個問題嗎？

每當我點擊我的blok，它就會展開並顯示爲視頻。但是，當我點擊它縮小它使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元素兩次單擊事件處理程序 - 它們都在各自單擊執行;他們不會像你期望的那樣連續點擊。

要解決此問題，您可以使用單擊事件處理程序來檢查blok2元素中是否存在iframe。如果有，則將其刪除並顯示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>