كيف للتبديل شعبة بناء على اختيار نوع الراديو؟

Question

وأنا تبديل لشعبة باستخدام شيء من هذا القبيل -

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

قبل عن طريق ...

وأود أن أقترح عليك إضافة فئة إلى كل من لوحات القابل للطي، ربما. لوحة. ثم قم بتحديث محددات لتعديل div.panel فقط بدلا من كل شعبة على الصفحة.

Answer 3

والحل لا يعمل في IE 8-- في الواقع عكس ذلك السلوك. استخدام وظيفة "فوق" بدلا من "التغيير"

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