raido 버튼 입력을 기반으로 동적 컨텐츠로드

Question

4 개의 상자, a, b, c, d가 있으며 사용자가 상자를 선택하면 다음을 수행합니다.

픽업 화상 부하 콘텐츠 1

픽업 화상 B로드 내용 2

픽업 화상 C 부하 콘텐츠 3

픽업 이미지 D 부하 함량 4

I는 모든 콘텐츠를 원하는 라디오 버튼을 클릭 할 때까지 숨겨 지도록로드 될 수 있습니다. 지금까지는 숨겨져 있지만 라디오 버튼을 클릭하면 내용이로드되지 않습니다.

감사합니다. (CamelCase를 포함)

<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> 

Answer 1

navLeft은 DIV의 ID입니다하지만 당신은 스크립트에서 (CamelCase를하지 않고) navleft을 사용하고 있습니다.

navRight을 숨기고 frame_right을 클릭하면 navRight이 다시 숨겨집니다. 논리적이지 않습니까?

Answer 2

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; 
}