jQueryのトグルボタンの変更テキスト

Question

私はjQueryを使って遊んでシンプルなプログラムを作成しようとしています。基本的に、私は、段落の表示を切り替えボタンにしたい、と私は、ボタン上のテキストは、「P」の可視性を変更したいです。最初の部分は機能し、2番目の部分は機能しません。

私はこの種のものについて尋ねる他の質問があるけど、私は非常に多くの異なるものをmimmicしようとしたとの結果を得ることができないので、私は、私はちょうど頼むはずと考えました。ここに私が今持っているコードがあります。

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

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

    $("p").toggle(); 

     }); 
    }); 

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

    </script> 

どうすればこの作品を作成できますか？

Answer 1

は、視認性が変化した場合、チェック表示が持っているかどうかを確認しないでください。 .toggle()は視認性を変更しません。

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

これを行うより良い方法がありますが、これはうまくいくはずです。

Answer 2

まず、onclickの関数内にコードを置く：

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

第二に、pがどこにも宣言されていません。 $（ 'p'）で選択します。代わりに、その可視性を確認することができますtoggleClass「アクティブ」とpがアクティブかどうか、クラスを持っているかどうかを確認。

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>