WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

jQueryでクリックする度にテキストを切り替える

ボタンを押すたびに「もっと見る」と「閉じる」が切り替わるようにjqueryを設定します。
ボタンを押すたびにON・OFFを切り替えるスイッチ的な物は以前であれば「Toggle」を使って簡単に出来ましたが、jQuery1.9以降で廃止されたので、代わりに「flg」を使ってON・OFFのスイッチを作ります。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
$(function(){
  var flg = "off";
  $('#btn').on('click', function(){
    if(flg == "off"){
      $(this).text("閉じる");
      flg = "on";
    }else{
      $(this).text("もっと見る");
      flg = "off";
    }
  });
});
</script>
</head>

<body>
<p id="btn">もっと見る</p>

</body>