webサイト制作の勉強|2019年3月クラス用ブログ

ファリカテクニカルアカデミーのwebサイト制作科の授業解説ブログです。

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

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryでのテキスト変更</title>
<style>
html,body {
  margin:0;
  padding:0;
}
img {
  vertical-align:bottom;
}
.txt {
  width:200px;
  height:50px;
  border:1px solid #444;
  border-radius:6px;
  text-align:center;
  line-height:50px;
  margin:50px auto 20px;
  cursor:pointer;
}
ul {
  width:200px;
  margin:0 auto;
}
li {
  margin-bottom:20px;
}
li:nth-child(n+4){
  display:none;
}
</style>
<script src="js/jquery-2.2.4.min.js"></script>
<script>
$(function(){
$('#btn').on('click',function(){
$(this).text('閉じる');
$('li:nth-child(n+4)').slideToggle(0);
});
});
</script>
</head>

<body>
<p id="btn" class="txt">もっと見る</p>
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
<li>リスト4</li>
<li>リスト5</li>
<li>リスト6</li>
</ul>
</body>
</html>

flgを使ったスイッチの作成

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


<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>

クリックイベントの際にa要素の動きに制限を掛ける

a要素にjQuery等でクリックイベントを指定する際、気を付けなければいけないのが、本来a要素が持っている動作とのバッティングです。
まずはa要素が本来持っている動作を再確認しましょう。

HTML の <a> 要素 (アンカー要素) は、別のウェブページ、ファイル、同一ページ内の場所、電子メールアドレス、または他の URL へのハイパーリンクを作成します。


とあるように本来、a要素の役割はhref属性内に記述されている場所へのリンク(移動)です。
では普段演習で記述しているような

<a href="#">テキストリンク</a>

こういった場合の「"#"」とはhtml内のどこに当たるでしょうか。


クリックイベントにreturn falseを指定する

こういったようにa要素にjQueryなどでクリックイベントを指定する場合にはバッティングしないように、a要素本来のハイパーリンク機能を無効にする必要があります。
その場合、クリックイベント内にreturn falseを指定します。

<script>
$(function(){
  var flg = "off";
  $('#btn').on('click', function(){
    if(flg == "off"){
      $(this).text('閉じる');
      flg = "on";
    }else{
      $(this).text('もっと見る');
      flg = "off";
    }
		return false;
  });
});
</script>
</head>

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