使用 jquery 代码激活 iframe 的问题

Question

我正在做一个非常基础的学校项目，我的 iframe 存在一些问题。我运行了一些 jquery 代码，它允许我通过单击 div 来激活 iframe。问题是，一旦我激活了一个 iframe，我就无法激活它上面的其他 iframe。 旁注，jquery 被重复 4 次，唯一的变化是 id，在本例中为“#computer”

这里是 jquery 和 html。提前致谢

<script type="text/javascript"         src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    $('#computer').click(function(){
        if(!$('#iframe').length) {
                $('#iframeHolder').html('<iframe id="iframe"     src="../iframes/computer_iframe.html" width="100%" height="100%"></iframe>');
    }
    });`enter code here`
});
</script>

<div class="clickable iframe activating divs">
    <div id="computer" class="computer_box"><p class="computer_text">My     Computer<p></div>
    <div id="monitor" class="monitor_box"><p class="monitor_text">My Monitor</p></div>
    <div id="keyboard" class="keyboard_box"><p class="keyboard_text">My Keyboard</p></div>
    <div id="mice" class="mice_box"><p class="mice_text">My Mice</p></div>
</div> <!--clickable iframe activating divs -->

该网站实际上在我的学校网络酒店上，您可以在这里看到问题，My website

Answer 1

从外观上看，如果 iFrame 尚不存在，您只允许创建 iFrame：

$('#computer').click(function(){
  if(!$('#iframe').length) {
    $('#iframeHolder').html('<iframe id="iframe" src="../iframes/computer_iframe.html" width="100%" height="100%"></iframe>');
  }
});

当您添加第一个 iFrame 时，$('#iframe').length 将为 1，使您的 if 条件无效。考虑到您只是更改 iFrame 的内容，可以跳过整个条件-$('#iframeHolder').html() 将简单地替换内容（如果已经存在）：

$('#computer').click(function(){
  $('#iframeHolder').html('<iframe id="iframe" src="../iframes/computer_iframe.html" width="100%" height="100%"></iframe>');
});

希望这会有所帮助！