在 div 单击更改其内部 html

Question

简要说明：我有一个div里面有谷歌地图 iframe 的。单击此 div 时，我想完全更改内部 iframe。我正在尝试使用以下代码实现相同的目标，但它不起作用。

我哪里错了？

主页.html

<div class="sim-row-edit-maps">
  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2598.0908429283936!2d75.5727857336016!3d31.318772374331786!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x391a5af808690f0f%3A0xc7b0e76486fbe177!2sSapphire+IT+Solutions+Pvt+Ltd!5e0!3m2!1sen!2sin!4v1536835928546" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

脚本.js

$(".sim-row-edit-maps").click(function(){
  alert("maps clicked");
  $(this).find('iframe').attr('src', 'https://www.youtube.com/embed/drOnSwo1Ob0');
});

我的代码正在更改scr而我想将整个iframe标签更改为

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d38490.03849859351!2d75.57911957607793!3d31.314034161618853!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x391a5af2e467dd43%3A0x19b51499bc01fdc3!2sTagore+Hospital+%26+Heart+Care+Centre+Private+Limited!5e0!3m2!1sen!2sin!4v1536836365464" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

我怎样才能做到这一点？

Answer 1

您可以像这样替换整个标签：

$(this).find('iframe').replaceWith(`<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d38490.03849859351!2d75.57911957607793!3d31.314034161618853!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x391a5af2e467dd43%3A0x19b51499bc01fdc3!2sTagore+Hospital+%26+Heart+Care+Centre+Private+Limited!5e0!3m2!1sen!2sin!4v1536836365464" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>`);