Le bouton bascule JQuery change de texte

Question

Je joue avec JQuery et essaie de créer un programme simple. Fondamentalement, je veux un bouton qui permute la visibilité d'un paragraphe, et je veux que le texte sur le bouton change avec la visibilité de "p". La première partie fonctionne, la deuxième partie ne fonctionne pas.

Je sais qu'il y a d'autres questions à propos de ce genre de choses, mais j'ai essayé de mimmic tellement de choses différentes et ne peux pas obtenir les résultats, donc j'ai pensé que je demanderais juste. Voici le code que j'ai en ce moment.

<script> $(document).ready(function(){ 

     $("button").click(function(){ 

    $("p").toggle(); 

     }); 
    }); 

if (p.style.visibility==="hidden") 
    { 
     $("button").text("show text"); 
    } 
    else 
    { 
     $("button").text("hide text"); 
    } 

    </script> 

Comment est-ce que je fais ce travail?

Answer 1

Ne pas vérifier si la visibilité a changé, vérifier si l'affichage a changé. .toggle() ne change pas la visibilité.

if (p.style.display==="none") 
    { 
     $("button").text("show text"); 
    } 
    else 
    { 
     $("button").text("hide text"); 
    } 

Il existe de meilleurs moyens de le faire, mais cela devrait fonctionner.

Answer 2

Tout d'abord, mettre votre code à l'intérieur fonction onclick:

$("button").click(function(){ 
    $("p").toggle(); 
    // change your text here 
}); 

En second lieu, p n'est pas déclarée nulle part. Sélectionnez-le avec $ ('p'). Au lieu de vérifier sa visibilité, vous pouvez toggleClass 'active' et vérifier si p a la classe active ou non.

Answer 3

$(document).ready(function(){ 
 

 
     $("button").click(function(){ 
 
     $("p").toggle(); 
 

 
     // Check it inside here and select p correctly 
 
     if($("p").is(":visible")){ 
 
      $("button").text("hide text"); 
 
     } else { 
 
      $("button").text("show text"); 
 
     } 
 
     }); 
 

 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button>Hide text</button> 
 
<p>Hi, this is text!</p>