Comment passer un div en fonction de la sélection du type de radio?

Question

Je bascule un div en utilisant quelque chose comme ça -

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

Cela fonctionne très bien. Ma question est de savoir comment je peux l'améliorer et le rendre plus souple, comme si je dois PLUS divs je dois modifier tous les cas de commutation.

doivent joindre la fonctionnalité de commutation dans une fonction et lier cette fonction à des événements tels que clic et le changement (juste pour faire en sorte que les travaux BASCULEMENT) ??

Merci pour votre aide.

Answer 1

Cela fonctionne, je viens de tester ce.

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

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

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

});
</script>

Les boutons radio doivent ressembler à ceci, où l'est le value de l'élément id qui doit être représenté.

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

Et enfin, les s devraient div ressembler à ceci, tous ayant la classe 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

Ce qui suit est basé sur le code que vous avez collé ici - avant d'utiliser, lire ci-dessous:

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

Avant d'utiliser ...

Je vous suggère d'ajouter une classe à chacun des panneaux collapsable, .Panneau peut-être. Et puis mettre à jour les sélecteurs pour modifier uniquement div.panel au lieu de chaque div sur la page.

Answer 3

votre solution ne fonctionne pas dans IE 8-- a en fait le comportement inverse. Utilisez la fonction « clic » au lieu de « changement »

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