jQuery: changer div css de display:none à display:block ne fonctionne pas

Je suis l'évolution du contenu d'un div basé sur la case de valeur. la valeur de la div est simple texte pour tous, mais une case à cocher. Dans le cas d'exception, la valeur de la div est une autre div (disons childDiv).

Donc, je suis l'évolution de la visibilité de l'childDiv (display: none par jQuery.css()) lorsque l'une des deux autres options sont cliqués, et la modifier pour la display: block lorsque l'exception de l'option est cliqué.

La childDiv devient caché quand je change de case à cocher. Cependant, il n'est pas l'arrière de l'écran à nouveau quand je veux qu'elle soit bien visible.

Le violon est ici: http://jsfiddle.net/sandeepy02/jLgyp/

Le code est

            <div class="switch switch-three candy blue" id="reachout">
                <input name="reachout" type="radio" id="tab-41" value="1" checked="checked"/>
                    <label for="tab-41">Experience</label>
                <input name="reachout" type="radio" id="tab-42" value="2"/>
                    <label for="tab-42">Contact Us</label>
                <input name="reachout" type="radio" id="tab-43" value="3"/>
                    <label for="tab-43">Why?</label>
                <div id="test1234">
                    <div id="test12345">
                        Option Start
                    </div>
                </div>
                <span class="slide-button"></span>
            </div>

     jQuery("input[name='reachout']",jQuery('#reachout')).change(
        function(e)
        {                   
            if(jQuery(this).val()=="1") 
            {
                jQuery("#test1234").html("");
                jQuery("#test12345").css("display","block");
            }
            if(jQuery(this).val()=="2") 
            {
                jQuery("#test1234").html("Option 2");
                jQuery("#test12345").css("display","none");
            }
            if(jQuery(this).val()=="3") 
            {
                jQuery("#test1234").html("Option 3");
                jQuery("#test12345").css("display","none");
            }
        });

J'ai même essayé de

            jQuery("#test12345").css('position', 'absolute');
            jQuery("#test12345").css('z-index', 3000);

après display: block mais qui n'a pas fonctionné.

Grâce

pouvez-vous essayer d'afficher() de la div? Peut-être que cela fonctionnera, depuis la div est cachée avec écran:non. Quelque chose comme: jQuery("#test12345").css("display","block").show();
Il a essayé . Ne marche pas encore.
Sur une note de côté, pour rendre votre code plus concis, vous pouvez essayer d'utiliser des cas/commutateur au lieu de plusieurs instructions if 😉

OriginalL'auteur user1517108 | 2013-04-03

css jquery

5

Vous d'écraser le div lorsque vous définissez est mère 's html, de sorte que vous essayez de montrer un div qui n'est pas là.

OriginalL'auteur Musa

Voir quel est votre problème:

Ce jQuery("#test1234") est le parent de jQuery("#test12345") et ce que vous faites est écrasé dans le code html de avec ces lignes de code:

jQuery("#test1234").html("");
jQuery("#test1234").html("Option 2");
jQuery("#test1234").html("Option 3");

Voir avant ce script d'exécution de la HTML était comme ça:

           <div id="test1234">
                <div id="test12345">
                    Option Start
                </div>
            </div>

Maintenant, quand vos scripts est exécuté alors qu'il ressemble à ceci:

par cette jQuery("#test1234").html(""); sortie est identique:

           <div id="test1234">

            </div>

par cette jQuery("#test1234").html("Option 2"); sortie est identique:

           <div id="test1234">
                Option 2
            </div>

et par ce jQuery("#test1234").html("Option 2"); sortie est identique:

           <div id="test1234">
                Option 3
            </div>

De sorte que vous faites display : block un élément qui n'est pas présent dans les dom après l'exécution du script.

OriginalL'auteur Jai

Juste un changement de jquery!!

jQuery("input[name='reachout']",jQuery('#reachout')).change(
                function(e)
                {                   
                    if(jQuery(this).val()=="1") 
                    {
            --> change in this line         jQuery("#test1234").html("Option Start");
                        jQuery("#test12345").css('position', 'absolute');
                        jQuery("#test12345").css("display","block");
                        jQuery("#test12345").css('z-index', 3000);
                    }
                    if(jQuery(this).val()=="2") 
                    {
                        jQuery("#test1234").html("Option 2");
                        jQuery("#test12345").hide();
                    }
                    if(jQuery(this).val()=="3") 
                    {
                        jQuery("#test1234").html("Option 3");
                        jQuery("#test12345").hide();
                    }
                });

OriginalL'auteur Sankalp Mishra

Basé sur le commentaire d'Andrew, j'ai décidé de mettre les divs séparé au lieu de parent-enfant.

Par la suite, il fonctionne très bien comme je le désir.

Le changement de code est:

<div class="switch switch-three candy blue" id="reachout">
                        <input name="reachout" type="radio" id="tab-41" value="1" checked="checked"/>
                            <label for="tab-41">Experience</label>
                        <input name="reachout" type="radio" id="tab-42" value="2"/>
                            <label for="tab-42">Contact Us</label>
                        <input name="reachout" type="radio" id="tab-43" value="3"/>
                            <label for="tab-43">Why?</label>
                        <div id="test1234">
                        </div>
                            <div id="test12345">
                                Option Start
                            </div>
                        <span class="slide-button"></span>
                    </div>

         jQuery("input[name='reachout']",jQuery('#reachout')).change(
            function(e)
            {                   
                if(jQuery(this).val()=="1") 
                {
                    jQuery("#test1234").hide();
                    jQuery("#test12345").show();
                }
                if(jQuery(this).val()=="2") 
                {
                    jQuery("#test1234").html("Option 2");
                    jQuery("#test1234").show();
                    jQuery("#test12345").hide();
                }
                if(jQuery(this).val()=="3") 
                {
                    jQuery("#test1234").html("Option 3");
                    jQuery("#test1234").show();
                    jQuery("#test12345").hide();
                }
            });

OriginalL'auteur user1517108

Est votre Id correct ?

jQuery("#test1234").html("");
jQuery("#test12345").css("display","block")

ouais ...j'ai collé html trop

OriginalL'auteur John

0

Simplement l'utiliser comme ci-dessous
```
//xxx is your div id
$('#xxx').hide();
$('#xxx').show();
```
Ça marchera très bien.

OriginalL'auteur Hunter Zhao

J'ai reconfiguré votre code avec quelques suggestions, il devrait maintenant fonctionner.

http://jsfiddle.net/jquery4u/nPMvV/

(function ($) {

    $("input[name='reachout']").on('change', function (e) {
        var checkVal = $(this).val();
        console.log(checkVal);

        //cache elements which are used often
        var $test1234 = $("#test1234"),
            $test12345 = $("#test12345");

        //use a switch statement instead of long winded if else
        switch (checkVal) {
            case "1":
                $test1234.html("Option 1");
                $test12345.show();
                break;
            case "2":
                $test1234.html("Option 2");
                $test12345.hide();
                break;
            case "3":
                $test1234.html("Option 2");
                $test12345.hide();
                break;

        }
    });
})(jQuery);

OriginalL'auteur Sam Deering

Vous devez vous connecter pour publier un commentaire.