jqueryコードでiframeをアクティブにする際の問題

Question

私は非常に基本的な学校プロジェクトに取り組んでおり、iframeにいくつか問題があります。私はdivをクリックしてiframeを有効にするためのjqueryコードをいくつか実行します。問題は、一度iframeをアクティブにすると、その上に他のiframeをアクティブにすることができないということです。 Sidnote、jQueryがidだけの変更で4回繰り返されています。この場合はsais "#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はあなたのif条件をinvaliating、1になります。あなたは、単に変更のiFrameの内容だ考えると、それは全体の条件付きスキップすることができます - いずれかがすでに存在する場合$('#iframeHolder').html()単に内容を置き換えます：

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

ホープ、このことができます！