Wie ein div auf der Funktyp Auswahl basiert wechseln?

Question

ich nun zwischen div so etwas wie dies mit -

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

Das funktioniert gut. Meine Frage ist, wie ich es verbessern kann und machen es flexibler, als ob ich zu MORE divs habe ich alle Fälle von Schalter zu ändern haben.

Auch die Switch-Funktionalität in einer Funktion einschließen sollte und binden diese Funktion auf Ereignisse wie klicken und ändern (nur um sicherzustellen, dass Makel Werke) ??

Danke für Ihre Hilfe.

Answer 1

Das funktioniert, ich habe es gerade getestet.

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

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

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

});
</script>

Die Radio-Buttons sollten wie folgt aussehen, wo der value die id des Elements ist, die angezeigt werden sollen.

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

Und schließlich die divs sollte wie folgt aussehen, die ganze Klasse MyDiv mit:

<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

Das folgende ist basierend auf dem Code Sie hier eingefügt - vor dem Gebrauch, lesen Sie unter:

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

Vor der Verwendung ...

Ich würde vorschlagen, Sie eine Klasse zu jedem der zusammenklappbaren Platten hinzuzufügen, vielleicht .panel. Und dann die Wähler nur aktualisieren div.panel statt jedes div auf der Seite zu ändern.

Answer 3

Ihre Lösung funktioniert nicht in IE 8-- tatsächlich das entgegengesetzte Verhalten hat. Verwenden Sie die „Klick“ Funktion anstelle von „change“

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