はてなブログの「アーカイブページをアーカイブするカスタマイズ」のjQueryを1つづつ解析してみた：その７

うっちょん

7回目です！
JavaScriptやjQueryの知識が無いので、今回も翻訳レベルで単語や文法を調べていきます。（間違っていたら泣く・・・）
入れ子が多くなったので、現在フローチャートを作成中。

元のプログラムがあるサイト​​

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">
$('#main-inner').ready(function(){
"use strict";
var pc_width = 600;
var device = window.screen.width < pc_width ? 'sp' : 'pc';
device = (device == 'pc' && $(window).width() > pc_width) ? 'pc' : 'sp';
var view_sec_num = 5; <!-- ここに1回あたりの表示記事数を設定 -->
var sections = $('#main-inner > div.archive-entries > section');
if((sections.length > view_sec_num) && device == 'sp') {
  var page_index = 0;
  var $entries_archive = null;
  var archive_num = 0;
  $entries_archive = $('<div id="entries-archive-' + archive_num + '"></div>');
  $entries_archive.insertBefore(sections[0]);
  for(var i=0; i < view_sec_num; i++) {
    $(sections[i]).appendTo($entries_archive);
    page_index += 1;
  }
  archive_num += 1;
  for(var i=view_sec_num; i < sections.length; i++) {
    if(page_index==view_sec_num) {
      var $read_more_link = $('<p style="text-align:center;background:#ddd"><a href="javascript:void(0)" style="line-height:3;font-size:80%:">もっと表示する</a></p>');
      $read_more_link.on('click',{archive_num: archive_num},function(e){

////////今回はここから///////////////////////
        $(e.target).hide();
        $('#entries-archive-' + e.data.archive_num).fadeIn("slow");
      });
      var $before_archive = $('#entries-archive-' + (archive_num-1));
////////ここまでやります///////////////////////

      $before_archive.append($read_more_link);
      $entries_archive = $('<div id="entries-archive-' + archive_num + '"></div>');
      $entries_archive.hide();
      $entries_archive.insertAfter($before_archive);
      page_index = 0;
      archive_num += 1;
    }
    $(sections[i]).appendTo($entries_archive);
    page_index += 1;
  }
  $entries_archive.hide();
}
});
</script>

解析するコードを書きましたが、設定の仕方等は上のサイトを御覧下さい。

【用語説明参照サイト】

・web design lab
・SMART
・WEB　MANABU
・HTML辞典
・js STUDIO
・HTMLクイックリファレンス
・Qiita
・teratail
・stack overflow
・ONZE/BLOG　オンズ開発ブログ
・ウェブランサー
・MDN web docs moz://a
・Samurai Blog
・TASK NOTES
・Webプログラミング入門
・jQuery入門
・「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典
・Web’Notes
・Handy Web Design
・パソコンあれこれ
・TECH PLAY
・Let'sプログラミング
・gaaamiiのブログ
・SE学院
・jQuery 入門と実践
・BeGeek

【解析その１】.on( )の実行内容１

最初は、前回解析した「.on( )」の実行内容を見ていきます。

$(e.target).hide();
【意味】
「もっと表示する」ボタンを押したら、
「もっと表示する」ボタンを、画面から消します。

簡単に書いたら、こんな感じです。
もうちょっとプログラム的に書くと・・・

【意味】
on命令で指定した場所をクリックしたら、
クリックした場所を読み取って、画面から消します。

前回は、「function(e){}」でイベントオブジェクトが入ってる入れ物に、「e」と名前を付けました。
今回は「e」を使って、イベントオブジェクトの中の一つである「.target」を呼び出しました。

・e.target（イベントオブジェクトの中の一つ）
「e」＝イベントオブジェクトが入ってる入れ物の名前。
「.target」＝指定場所をクリックした時の情報を持っている。
「e.target」で「e」の中の「target」を呼び出しています。
（間は「.」で区切る）

e.targetで呼び出したイベントオブジェクトを直接使いたい場合は、
「$( )」の中に入れてjqueryオブジェクトにします。
※「e」や「イベントオブジェクト」は、その６で説明しています。
※「jqueryオブジェクト」は、その１で説明しています。

今回の指定場所は「$read_more_link」に入ってるhtmlですが、
<p style="text-align:center;background:#ddd">
   <a href="javascript:void(0)" style="line-height:3;font-size:80%:">もっと表示する</a>
</p>
内容は、上記の通り。
<p>タグと<a>タグが入っています。

今回「.target」に入ってる情報は
・<p>タグ（ボタン本体）
・<a>タグ（ボタンの中の文字）
です。

「.target」を呼び出すと、「.on( )」命令でセレクタ（CSSで書くhtmlタグやグループ名）を指定しても、指定場所に入っているタグ全てをチェックしてしまいます。

もし、決まったタグやグループだけを見てほしい場合は、
「.on( )」命令でセレクタを指定し、
「.currentTarget」を使って情報を呼び出してください。

【詳細リンク】
・.target
・.currentTarget

ここから先は

2,795字 / 4画像

¥ 300

モチベーションにも繋がりますので、宜しくお願いします！