Wenn Radio-Button Ausgewählt ist, Zeigen Div - 8 Radio Buttons / 8 Divs - Kann dies vereinfacht werden?

Im Grunde, ich will 8 radio-buttons. Und wenn ein radio-button ausgewählt ist, dann wird ein div ist unten dargestellt. Wenn eine andere Schaltfläche ausgewählt wird, einem anderen div angezeigt wird. Nur ein div zu einem Zeitpunkt angezeigt und wenn keine Schaltfläche ausgewählt ist (zunächst), dann werden keine divs angezeigt.

Dies ist mein HTML, das ist ziemlich standard, ich werde nicht versuchen, das zu verbessern, was ich brauche.

<form id='group'>
    <label><input type="radio" name="group1" class="sim-micro-btn"/></label>
    <label><input type="radio" name="group1" class="sim-mini-btn"/></label> 
    <label><input type="radio" name="group1" class="sim-maxi-btn"/></label>
    <label><input type="radio" name="group1" class="sim-mega-btn"/></label>
    <label><input type="radio" name="group1" class="phone-smart-micro-btn"/></label>
    <label><input type="radio" name="group1" class="phone-smart-mini-btn"/></label>
    <label><input type="radio" name="group1" class="phone-smart-btn"/></label>
    <label><input type="radio" name="group1" class="phone-smart-maxi-btn"/></label>
</form>

<div class="billpay-internet-add-ons">
    <div class="sim-micro-desktop">sim-micro</div>
    <div class="sim-mini-desktop">sim-mini</div>
    <div class="sim-maxi-desktop">sim-maxi</div>
    <div class="sim-mega-desktop">sim-mega</div>
    <div class="phone-smart-micro-desktop">phone-smart-micro</div>
    <div class="phone-smart-mini-desktop">phone-smart-mini</div>
    <div class="phone-smart-desktop">phone-smart</div>
    <div class="phone-smart-maxi-desktop">phone-smart-maxi</div>
</div>

Aber das ist mein script und es scheint ziemlich hektisch und ich wundere mich, bevor ich auf gibt es einen Weg, das zu tun dieses ein bisschen einfacher?

$(document).ready(function(){
    $('.sim-micro-desktop').hide();
    $('.sim-mini-desktop').hide();
    $('.sim-maxi-desktop').hide();
    $('.sim-mega-desktop').hide();
    $('.phone-smart-micro-desktop').hide();
    $('.phone-smart-mini-desktop').hide();
    $('.phone-smart-desktop').hide();
    $('.phone-smart-maxi-desktop').hide();


    $('form#group').click(function(){
        if($('.sim-micro-btn').is(":checked")){
            $('.sim-micro-desktop').show();
        } else {
            $('.sim-micro-desktop').hide();
        }     

        if($('.sim-mini-btn').is(":checked")){
            $('.sim-mini-desktop').show();
        } else {
            $('.sim-mini-desktop').hide();
        }     

        if($('.sim-maxi-btn').is(":checked")){
            $('.sim-maxi-desktop').show();
        } else {
            $('.sim-maxi-desktop').hide();
        }  

        if($('.sim-mega-btn').is(":checked")){
            $('.sim-mega-desktop').show();
        } else {
            $('.sim-mega-desktop').hide();
        }  

        if($('.phone-smart-micro-btn').is(":checked")){
            $('.phone-smart-micro-desktop').show();
        } else {
            $('.phone-smart-micro-desktop').hide();
        }  

        if($('.phone-smart-mini-btn').is(":checked")){
            $('.phone-smart-mini-desktop').show();
        } else {
            $('.phone-smart-mini-desktop').hide();
        }  

        if($('.phone-smart-btn').is(":checked")){
            $('.phone-smart-desktop').show();
        } else {
            $('.phone-smart-desktop').hide();
        }  

        if($('.phone-smart-maxi-btn').is(":checked")){
            $('.phone-smart-maxi-desktop').show();
        } else {
            $('.phone-smart-maxi-desktop').hide();
        }  

          });


});

InformationsquelleAutor 50dollanote | 2013-09-06

  1. 14

    Erstens gemeinsames Klassen sowohl auf der radio Tasten und die div Elemente, die zeigen Inhalte. In meinem Beispiel habe ich verwendet trigger und content beziehungsweise. Dann fügen Sie eine data - Attribut, um das radio zu identifizieren, welches div soll gezeigt werden, auf klicken Sie.

    Gekürzt Beispiel:

    <form id='group'>
    <label>
        <input type="radio" name="group1" class="sim-micro-btn trigger" data-rel="sim-micro-desktop" />
    </label>
</form>
<div class="billpay-internet-add-ons">
    <div class="sim-micro-desktop content">sim-micro</div>
</div>

    Dann brauchen Sie nur 1 Klick-Prozedur wie diese:

    $(document).ready(function(){
    $('.trigger').click(function() {
        $('.content').hide();
        $('.' + $(this).data('rel')).show();
    });
});

    Können Sie auch dann verwenden CSS zum ausblenden der div Elemente ohne jQuery - styling sollte immer durchgeführt werden, in CSS sowieso, da es eine viel bessere Trennung von Bedenken.

    .content {
    display: none;
}

    Beispiel Geige

    Wunderbar, vielen Dank. Macht Sinn, wenn ich es sehe aufgeschrieben, aber brauchte Hilfe, um zu sehen, dass. Danke!
    Mann, Wenn ich einfügen-Werte für alle einzelnen verborgenen Eingänge (ich bin verändert, div, input type text), werden diese Werte an die Datenbank? Ich möchte, wenn Sie ausgeblendet sind, dann werden die Werte nicht an die Datenbank. Können Sie mir ein wenig Aufklärung. Danke.
    Wenn Sie nicht möchten, dass der Wert eines input an den server gesendet mit den anderen Formular-POST-Daten, legen Sie die disabled="disabled" auf Ihr Eigentum.

    InformationsquelleAutor Rory McCrossan

  2. 1

    Können Sie verstecken die div - Elemente mit CSS:

    .billpay-internet-add-ons div {
  display: none;
}

    Dann können Sie die className des target um zu bestimmen, welche div zu zeigen, versteckt alle sibling Elemente:

    $('form#group').click(function(e) {
    var className = e.target.className.replace('btn', 'desktop');    
    $('.' + className).show().siblings().hide();
});

    Hier ist ein Turnschuh

    InformationsquelleAutor billyonecan

  3. 0

    html5 data-Attribut)(ich.e-Daten-mappingclass ), das auf entsprechende div die Sie brauchen, zu zeigen. hinzufügen gleichen Klasse alle radio-Taste(ie radioClass).

    HTML

     <label><input type="radio" name="group1" class="radioClass sim-micro-btn" data-mappingclass="sim-micro-desktop"/></label>
 <label><input type="radio" name="group1" class="radioClass sim-mini-btn" data-mappingclass="sim-mini-desktop"/></label>
 ... //same for others

    JS

    $('.radioClass').click(function() {
  $('.billpay-internet-add-ons div').hide();
  if(this.checked){
     $('.' + $(this).data('mappingclass').show();
  }
});

    InformationsquelleAutor bipen

  4. 0

    Sie könnte verwenden von Auswahlbereichen, um reduzieren Sie die Anzahl der code-Zeilen hier.

    $('.sim-micro-desktop').hide();
$('.sim-mini-desktop').hide();
$('.sim-maxi-desktop').hide();
$('.sim-mega-desktop').hide();
$('.phone-smart-micro-desktop').hide();
$('.phone-smart-mini-desktop').hide();
$('.phone-smart-desktop').hide();
$('.phone-smart-maxi-desktop').hide();

    Gekürzt werden kann:

    $('.billpay-internet-add-ons div').hide();

    Diese verwendet das parent-element zu gruppieren die Elemente, die Sie ausblenden möchten, anstatt die Wiederholung der Anforderung für jeder man.

    Ebenso können Sie Ihre Namenskonvention zum anzeigen der Elemente auf die Elemente ein-und ausblenden - hier ist die voll funktionsfähige Beispiel:

    $(document).ready(function(){
    $('.billpay-internet-add-ons div').hide();

    $('form#group').click(function(){
        $('#group input').each(function() {
            var item = $(this);
            var isChecked = item.is(':checked');
            var name = item.attr('class').replace("-btn", "-desktop");

            if (isChecked) {
                $('.' + name).show();
            } else {
                $('.' + name).hide();
            }
        });
    });
});

    Diesem Beispiel basiert ausschließlich auf den HTML-Code ohne irgendwelche änderungen. Sehen Sie, hier zu arbeiten.

    Könnte man vereinfachen Sie weiter, wenn Sie nicht brauchen, um eine Transformation der Namen. Man könnte ein data-Attribut, anstelle der änderung des Klassennamen, dies zu tun.

    InformationsquelleAutor Fenton

  5. 0
    var $billpay= $('.billpay-internet-add-ons');
$billpay.find("div").hide();
$("#group input:radio").click(function(){
  $billpay.find("div").hide();
  $billpay.find("div:eq("+$(this).parent().index()+")").show();    
});

    http://jsfiddle.net/KaF77/2/

    InformationsquelleAutor

  6. 0

    Ich es vereinfacht einige vier. Im Grunde kannst du schauen welchen index das radio geklickt hat und dann ein div mit dem gleichen index. Also ist die position der divs hat, um die radios.

    Ihre HTML ist die gleiche wie vorher.

    Ihre CSS:

    .billpay-internet-add-ons > div {
    display:none;
}

    Alle Ihre Javascript:

    $(document).ready(function(){
    $('form#group').click(function(e)
    {
        $('.billpay-internet-add-ons > div').hide();
        $('form#group input[type="radio"]').each(function(index)
        {
            if($(this).is(':checked'))
            {
                $('.billpay-internet-add-ons > div:eq(' + index + ')').show();
            }
        });
    });
});

    jsFiddle Demo: http://jsfiddle.net/cfSXY/

    InformationsquelleAutor Oskar Hane

  7. 0

    Erstens, Sie haben alles, was standardmäßig ausgeblendet (mit Ausnahme einer form vielleicht) mit CSS, das entledigt diese:

    $('.sim-micro-desktop').hide();
$('.sim-mini-desktop').hide();
$('.sim-maxi-desktop').hide();
$('.sim-mega-desktop').hide();
$('.phone-smart-micro-desktop').hide();
$('.phone-smart-mini-desktop').hide();
$('.phone-smart-desktop').hide();
$('.phone-smart-maxi-desktop').hide();

    Dieser hat eine negative Implikation für Benutzer ohne javascript, wenn Sie besorgt sind - Sie werden nie in der Lage, um zu sehen, die anderen Formen.

    Nächsten, nur ein radio kann geprüft werden, so finden Sie einfach heraus, welches es ist mit:

    $('input[name=group1]:checked);

    Aber warum sollte man das tun, so haben Sie die radios haben einen click-handler, mehr wie:

    $('#group input[type="radio"').click(function(){
    //code to show/hide form
});

    Jetzt haben Sie die Wahl, wie Sie link zu Ihrem radio-buttons, um die verschiedenen Formen eine Möglichkeit könnte sein, verwenden Sie das data-Attribut, so definieren Sie Ihre radios so:

    <label><input type="radio" name="group1" class="phone-smart-maxi-btn" data-form="phone-smart-maxi-desktop"/></label>

    Die Sie zugreifen können, etwa so:

    $('input[name=group1]:checked).data("form");

    Alles was Sie jetzt tun müssen, ist, blendet die div-war das schon zeigen, aber das kann erreicht werden mit einer ähnlichen Nutzung des data-Attribut oder über die :visible selector.

    InformationsquelleAutor JohnMark13

Schreibe einen Kommentar