Как переключить 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;
        }
    }
);

Это работает нормально.Мой вопрос заключается в том, как я могу улучшить его и сделать более гибким, поскольку, если у меня будет БОЛЬШЕ divs, я должен изменить все случаи переключения.

Также следует ли включить функциональность переключения в функцию и привязать эту функцию к таким событиям, как щелчок и изменение (просто чтобы убедиться, что переключение работает)??

Спасибо за вашу помощь.

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.panel вместо каждого div на странице.

Answer 3

ваше решение не работает в IE 8 - на самом деле имеет противоположное поведение.Используйте функцию "щелкнуть" вместо "изменить".

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