jQuery vraag over detach, reattach en onready

Status
Niet open voor verdere reacties.
J

julianmurillo

Gebruiker
Lid geworden
15 jan 2018
Berichten
41
Hallo Allemaal

Ik heb de volgende code geschreven om bepaalde div's laten tonen en verbergen als er een bepaalde selectie-waarde wordt gekozen uit een dropdown.

Dan vroeg ik mij af hoe ik de display:none and display:block instructies kan veranderen naar een detach- een reattach-event om het netjes te maken.

Tevens, zou ik ook willen weten of ik iets aan de code kan doen zodat de div's getoond of verborgen zou worden voor de pagina wordt geladen. Nu is het dat de selected value geen invloed heeft op het tonen/verbergen van de div's als de pagina is geladen, maar alleen als ik -daarna- een value zou selecteren uit de dropdown -dat kom uiteraard door de change event-.

HTML: 
<script>
    jQuery(document).ready(function() {
        jQuery('#attributes-fieldset').detach().insertBefore( jQuery('#billing_address_list') );
        jQuery('#customer_group').change(function() {
            if(jQuery('#customer_group').val() == '31572') {
                jQuery("div.input-company").css('display','none');
                jQuery("div.input-vat").css('display','none');
                jQuery('label[for="billing:vat_id"]').css('display','none');
            }
            else {
                jQuery("div.input-company").css('display','block');
                jQuery("div.input-vat").css('display','block');
                jQuery('label[for="billing:vat_id"]').css('display','block');
            }
        });
    });
</script>

Dank voor je ideeën en hulp.
 
hoe ik de display:none and display:block instructies kan veranderen naar een detach- een reattach-event om het netjes te maken.
Klik om te vergroten...
Waarom een .detach() als het eenvoudig met .css() kan?
Wil je toch de .detach() method gebruiken dan kan je vooraf het element met inhoud in een variabele bewaren zodat je die later weer kan terugzetten.
Als het er alleen om gaat om de code korter te maken dan kan je dit doen:

Code: 
jQuery('#customer_group').on('change', function() {
    var fieldDisplay = ( jQuery(this).val() === '31572' ) ? 'none' : 'block';
    jQuery("div.input-company").css('display', fieldDisplay);
    jQuery("div.input-vat").css('display', fieldDisplay);
    jQuery('label[for="billing:vat_id"]').css('display', fieldDisplay);
});

Tevens, zou ik ook willen weten of ik iets aan de code kan doen zodat de div's getoond of verborgen zou worden voor de pagina wordt geladen
Klik om te vergroten...
In de css kan je een none of block als standaard waarde opgeven.
Die waarde wordt bij het laden van de stylesheet als 'standaard waarde' gebruikt. De jQuery wordt pas uitgeoverd als de DOM klaar is.
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan