무선 유형 선택에 따라 DIV를 전환하는 방법은 무엇입니까?

Question

나는 이와 같은 것을 사용하여 div를 전환합니다.

<input type="radio" name="myRadio" value="myDiv_1" />MyDiv
<input type="radio" name="myRadio" value="myDiv_2" />MyDiv2
<input type="radio" name="myRadio" value="myDiv_3" />MyDiv3

<div id="myDiv_1"> 1 Some input fields, text </div>
<div id="myDiv_2"> 2 More input fields, text </div>
<div id="myDiv_3"> 3 More input fields, text </div> 

JAVASCRIPT

$('#myDiv_1').hide();
$('#myDiv_2').hide();
$('#myDiv_3').hide();

$('input[name="myRadio"]').change(function() {
        var selected_type = $(this).val();
        switch(selected_type) {
            case "myDiv_1":
                $('#myDiv_1').slideDown();
                //if others are visible just slideup
                $('#myDiv_2').slideUp(); 
                $('#myDiv_3').slideUp();
            break;

            case "myDiv_2": 
                $('#myDiv_2').slideDown();
                //if others are visible just slideup
                $('#myDiv_1').slideUp(); 
                $('#myDiv_3').slideUp();
            break;
            case "myDiv_3": 
                $('#myDiv_3').slideDown();
                //if others are visible just slideup
                $('#myDiv_2').slideUp(); 
                $('#myDiv_1').slideUp();
            break;
        }
    }
);

이것은 잘 작동합니다. 내 질문은 내가 그것을 개선하고 더 많은 div를 해야하는 것처럼 더 유연하게 만들 수있는 방법입니다. 모든 스위치 사례를 수정해야합니다.

또한 함수에서 스위치 기능을 동봉 하고이 기능을 클릭 및 변경과 같은 이벤트에 바인딩해야합니다 (토글링이 작동하는지 확인하기 위해)?

당신의 도움을 주셔서 감사합니다.

Answer 1

이것은 작동합니다. 방금 테스트했습니다.

<script type="text/javascript">
$(document).ready(function(){

    $('.MyDiv').hide();

    $('input[name="myRadio"]').change(function(){
        var selected = $(this).val();
        $('.MyDiv').slideUp();
        $('#'+selected).slideDown();
    });

});
</script>

라디오 버튼은 다음과 같아야합니다. value 입니다 id 표시해야 할 요소의.

<form action="example.com" method="post">
    <input type="radio" name="myRadio" value="myDiv_1" />MyDiv<br />
    <input type="radio" name="myRadio" value="myDiv_2" />MyDiv2<br />
    <input type="radio" name="myRadio" value="myDiv_3" />MyDiv3<br />
    <input type="radio" name="myRadio" value="myDiv_4" />MyDiv4
</form>

그리고 마지막으로, divs는 이렇게 보일 것입니다. 모두 수업이 있습니다. MyDiv:

<div id="myDiv_1" class="MyDiv">Div number 1!</div>
<div id="myDiv_2" class="MyDiv">Div number 2!</div>
<div id="myDiv_3" class="MyDiv">Div number 3!</div>
<div id="myDiv_4" class="myDiv">Div number 4!</div>

Answer 2

다음은 여기에 붙여 넣은 코드를 기반으로합니다. 사용하기 전에 아래를 읽으십시오.

$("div").hide();
$("input[name='myRadio']").change(function(){
  $("div:not(#"+$(this).val()+")").slideUp();
  $("div#"+$(this).val()).slideDown();
});

사용하기 전에 ...

각 접을 수있는 패널, 아마도 .panel에 클래스를 추가하는 것이 좋습니다. 그런 다음 선택기를 업데이트하여 페이지의 모든 DIV 대신 Div.Panel 만 수정하십시오.

Answer 3

솔루션은 IE 8에서 작동하지 않습니다. 실제로 반대의 동작이 있습니다. "변경"대신 "클릭"기능을 사용하십시오.

  $('.myDiv').hide(); 
    $('input[name="myRadio"]').click(function(){
        var selected = $(this).val();
       $('.myDiv').slideUp();
        $('#'+selected).slideDown();
    });