加載基於raido按鈕輸入的動態內容

我有4個盒子，a，b，c，d，如果用戶選擇了盒子，我希望它做以下操作;加載基於raido按鈕輸入的動態內容

拾取圖像的負載內容1

拾取圖像b負載內容2

拾取圖像C加載內容3

拾取圖像d負載內容4

我希望所有的內容的可能會被加載爲隱藏，直到單擊單選按鈕。到目前爲止，它都是隱藏的，但單擊單選按鈕時不加載內容。

謝謝！

<div id="framework"> 
    <div class="element"> 
     <img style="float:left;" src="img/left.png" /> 
     <img style="padding-left:25px; float:left;" src="img/right.png" /> 
     <img style="padding-left:25px; float:left;" src="img/both.png" /> 
     <img style="padding-left:25px; float:left;" src="img/without.png" /> 
    </div> 
    <form class="actions"> 
     <div style="clearfix:none;" class="confirm"> 
      <input type="radio" id="frame_left" name="framework"> 
     </div> 
     <div style="clearfix:none;" class="confirma"> 
      <input type="radio" id="frame_right" name="framework"> 
     </div> 
     <div style="clearfix:none;" class="confirmb"> 
      <input type="radio" id="frame_both" name="framework"> 
     </div> 
     <div style="clearfix:none;" class="confirmc"> 
      <input type="radio" id="frame_without" name="framework"> 
     </div> 
    </form> 
</div> 
<script> 
    $(document).ready(function() { 
     // do your checks of the radio buttons here and show/hide what you want to 
     $("#navLeft").hide(); 
     $("#navRight").hide(); 
     if ($("#frame_left:checked").length > 0) { 
      $("#navLeft").hide(); 
     } 

     // add functionality for the onclicks here 
     $("#frame_left").click(function() { 
      $("#navleft").show(); 
     }); 

     $("#frame_right").click(function() { 
      $("#navRight").hide(); 
     }); 
    }); 
</script> 
<img id="navLeft" src="img/left.png" /> 
<img id="navRight" src="img/right.png" /> 
</div>

來源

2013-03-27 Nat

請提供你現有的代碼。 – 2013-03-27 20:29:50

請參閱.click（）獲取單選按鈕並在其上放置觸發器 – theshadowmonkey 2013-03-27 20:30:33

對不起，我發誓我在我的錯誤中張貼了我的代碼，謝謝！ – Nat 2013-03-27 20:31:30

navLeft（與駝峯）是你的DIV的ID，但你在你的腳本中使用navleft（無駝峯）。

你在隱藏navRight，如果你點擊frame_right你的JS會再次隱藏navRight？這不合邏輯，或？

來源

2013-03-27 20:45:37 alexP

我會用switch語句來做這件事，並用css默認隱藏內容元素。 A working fiddle。不知道你的意思是frame_without。也許只是爲了不顯示，就像現在一樣。

$(document).ready(function(){ 
$('input[name="framework"]').change(function() { 
    $('#navLeft, #navRight').hide(); 

    switch($('input[name="framework"]:checked').attr('id')) { 
     case "frame_left": 
      $("#navLeft").show(); 
      break; 
     case "frame_right": 
      $("#navRight").show(); 
      break; 
     case "frame_both": 
      $("#navLeft, #navRight").show(); 
      break; 
     case "frame_without": 
      //Dont know what here should happen 
      break; 
    } 
}); 
});

隱藏內容的CSS：

#navLeft, #navRight { 
    display: none; 
}

來源

2013-03-27 20:55:13

加載基於raido按鈕輸入的動態內容

回答

相關問題