0
votes

Cacher un conteneur, mettre à jour le Innerhtml et puis la montrant à nouveau

Je veux masquer un conteneur, mettre à jour le conteneur innerhtml du conteneur, puis afficher le conteneur à nouveau. Je sais que les deux actions sont possibles mais combinées ensemble - innerhtml ne semble pas mettre à jour ...

Voici le jsfiddle - https://jsfiddle.net/definaly/k4xuscz1/58/ p>

est-ce possible? p>

(question supplémentaire de discussion - pensez-vous Il s'agit d'une manière asynchrone appropriée de basculer entre les pages du site Web? Y a-t-il quelque chose qui peut se tromper avec cette méthode?) p>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>

<button id="button"> Click me </button>

<div class="content">

</div>

javascript jquery jquery-ui

1 commentaires

C'est aussi ma première fois avec Jsfiddle, alors s'il vous plaît laissez-moi savoir si le lien est cassé.

3 Réponses :

1
votes

Préfaçage de cela avec: Je ne suis pas sûr à 100% si c'est le moyen idéal de le faire, mais vous pouvez obtenir les résultats souhaités avec les JS suivants.

Changez votre JS à: P>

$('#button').click(function(){
    var content = $('.content');

    content.hide('slide', {direction:'left'} ,400);
    setTimeout(function(){
        content.html("<h3>Page One</h3>");
    }, 400)

    content.show('slide', {direction:'right'} ,400);

});

3 commentaires

Pas de soucis, content de pouvoir aider :)

@Maxwells qui fonctionnera mais c'est un peu fragile. Voir ma réponse pour une alternative. Pas destiné à frapper votre réponse, essayez simplement d'aider tout le monde à apprendre sur d'autres alternatives.

@Toddchafee merci! Je ne savais pas que vous pouviez passer un quatrième argument - j'apprécie vraiment les commentaires, c'est génial d'apprendre quelque chose de nouveau!

1
votes

Vous utilisez jQuery. La syntaxe de jQuery pour modifier le HTML intérieur n'est pas .innerhtml = ""

C'est .html ("")

modifier donc content.innerhtml = "

`page 1 "; à content.html (" Page 1 "); < / code>`



                                                                    
                                    
                                    
                                        0 commentaires


                        
                                            
                            
                                
                                    2
 votes
                                
                            
                            
                                
                                     au lieu de  innerhtml  code> vous utilisez simplement  html  code> avec jQuery. Aussi, au lieu d'utiliser un  fragile (code> Settimeout  code> qui va casser si vous modifiez la durée de votre  masquer  code> mais oubliez de le changer dans le  Settimeout  code>, vous peut simplement utiliser le quatrième paramètre de la méthode  code> masquer  code>. Il faut une fonction qui fonctionnera lorsque l'animation cachée se termine. 
  p> 


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>

<button id="button"> Click me </button>

<div class="content">

</div>

                                

                                                                    
                                    
                                    
                                        1 commentaires
                                        
                                                                                            
                                                    C'est génial! Merci beaucoup. - Jamais saviez que la fonction Masquer avait un argument supplémentaire.