Kaketan::Tech

誰かのためになるかもしれないテックなことに関するメモを書いています。

クリックで文字を切り替える【jQuery】

▼ 宣伝 ▼

これを読んでいるあなた!HP制作・アフィリエイトサイト制作に興味ありませんか?

現在、コーポレートサイトやアフィリエイトサイトの制作、月額課金制のファンクラブ制作などを行っています。

新しい収益源・集客ツールとしてのWeb制作はお任せください!「Kaketan::Tech を見た」で特別価格にてご案内いたします。

詳細は こちら のお仕事一覧をご覧ください!

プログラミング学習支援サロンのご紹介

フリーランスエンジニアの私が、あなたがプログラマとして案件を獲得できるようになるまでサポートいたします。詳細は こちら をクリック!

▲ 宣伝 ▲

テキストを切り替えるときはckick()関数を用いると簡単。

//id=sampleとしてある範囲のテキストを取得する
$('#sample').text();
//id=sampleとしてある範囲のテキストを置き換える
$('#sample').text("変更しました。");

これを応用して、toggle()関数の「表示」・「非表示」のようにボタンを押して「変更前」・「変更後」と切り替わるようにしたい。
toggle()とclick()を使ってどうにかしようとしたが、if文を用いて書いてあげると簡単だった。

$(function(){
  var flg = "default";
  $('#item_detail button.see_more').click(function(){
    if(flg == "default"){
      $(this).text("閉じる");
      flg = "changed";
    }else{
      $(this).text("もっと見る");
      flg = "default";
    }
  });
});

参考

改訂版 Webデザイナーのための jQuery入門

改訂版 Webデザイナーのための jQuery入門