jQuery - 라디오 선택에 기반한 DIV 전환

라디오 선택에 따라 div를 전환하는 가장 좋은 방법은 무엇입니까? 이미 라디오가 시작 부분에 선택되어 있고 선택 사항이없는 경우 모든 div가 숨겨지면 전환을 수행하고 싶습니다.jQuery - 라디오 선택에 기반한 DIV 전환

나의 현재 코드는

$(function() { 
    var shippDescriptions = $('div#shipping_descs > div'); 

    shippDescriptions.hide(); 

    $('input[type=radio]', '#shipping_inputs').change(function() { 
     shippDescriptions.hide().filter('.' + $(this).attr('id')).show(); 
    }); 
});

가장 좋은 방법은 무엇입니까 변화에 대한 스위치 (더 좋은 방법이 그렇게 말 마십시오 경우, 현재 ID의 클래스 이름으로 입력 ID를 사용하여)합니까? 압축을 풀고 change()의 코드를 무언가로 설정하고 두 번 실행하십시오?

페이지가로드 될 때까지 div가 숨겨지지 않습니다.

출처

2011-12-28 RS7

의 선택은'shippDescriptions'은 당신의 코드를 유지하는 사람을위한 거 문제를 일으킬 수 있습니다. 누군가를 위해 "p"를 제거하십시오! –

이렇게하면 페이지가로드 될 때까지 div가 숨겨지지 않습니다. 나는 전형적으로 이것을 반대한다. divs (display : none)를 숨긴 다음 javascript가 있어야만 표시되도록 전환 할 수 있습니다. 갑자기 화면에 더 많은 요소가 추가되는 것을 보는 것이 정상적인 방법이라고 생각합니다. – Prescott

예 페이지가 완전히로드 된 후에 만 div를 숨 깁니다. 그러나 처음부터 보이지 않게 할 수 있습니다! –

는 아래의 방법을 확인 작업을 얻기에 좋은 시작이 될해야 두 번 설정해야합니다, 그것은 하나 개 제한이 그 값 라디오 옵션 및 각 배송 desc의 div id에는 관계가 있습니다. 그러나 나는 그것이 문제가되어서는 안된다고 믿습니다.

또한 HTML/css의 모든 desc를 숨겨서 onload를 표시하지 않는 것이 좋습니다.

<html> 
<head> 
    <script src="jquery.js" type="text/javascript"></script> 
    <script> 
     $(function() { 
      var shippDescriptions = $('div#shipping_descs > div.shipping_desc'); 

      //one time - onload 
      var selectedOption = $(':radio[name="r1"]:checked').val();    
      $('#S'+selectedOption).show(); 

      $('input[type=radio]', '#shipping_inputs').change(function() { 

       //hide all shipping desc 
       shippDescriptions.hide(); 

       //show shipping desc for selected option 
       $('#S'+ $(this).val()).show(); 
      }); 
     }); 

    </script> 
    <style> 
     .hidden { display: none; } 
    </style> 
</head> 
<body> 
    <div id="shipping_inputs"> 
     <input type="radio" value="1" name="r1" />S1 
     <input type="radio" value="2" name="r1" />S2 
     <input type="radio" value="3" name="r1" checked="checked" />S3 
     <input type="radio" value="4" name="r1" />S4 
     <input type="radio" value="5" name="r1" />S5 
    </div> 
    <div id="shipping_descs" > 
     <div id="S1" class="shipping_desc hidden" >S1 Desc</div> 
     <div id="S2" class="shipping_desc hidden" >S2 Desc</div> 
     <div id="S3" class="shipping_desc hidden" >S3 Desc</div> 
     <div id="S4" class="shipping_desc hidden" >S4 D esc</div> 
     <div id="S5" class="shipping_desc hidden" >S5 Desc</div> 
    </div> 
</body>

출처

2011-12-28 19:35:16

페이지가로드되면 div가 숨겨집니다. 클라이언트 컴퓨터에 따라 페이지로드시 이미지가 표시되지 않아야합니다. div가 표시되는 것이 염려되는 경우 CSS에 display:none을 포함하는 것이 더 좋습니다.

당신의 스위칭 질문에 관해서는 당신이

 
$(function() { 
    var shippDescriptions = $('div#shipping_descs > div'); 
    shippDescriptions.each(function(){ 
     if ($(this).attr('class') == $('input[type="radio"]:checked').attr('id')) 
      $(this).show().siblings().hide(); 
    }); 
    $('input[type=radio]', '#shipping_inputs').change(function() { 
     shippDescriptions.hide().filter('.' + $(this).attr('id')).show(); 
    });

이

출처

2011-12-28 19:32:24 vmex151

jQuery - 라디오 선택에 기반한 DIV 전환

답변

관련 문제