Q&A現時点の仕様
jQuery・JavaScript初心者です。
現在、キャラクターの情報を記載する名簿形式のWebページを作成中です。
前提条件として
・キャラクターの情報はExcelファイルで管理し変更・追加があればそこに追記
・ExcelファイルをXMLファイルとして保存し、ajaxを用いて読み込む
・既にXMLファイル上であいうえお順に整列されている
実現させたいこと
「あかさたな～」のボタンを押すと該当のキャラクターにページ内ジャンプさせたい
※もし該当キャラクターがいない場合は押しても反応はしない
該当のソースコード
XML
1<?xml version="1.0" encoding="UTF-8" standalone="yes"?> 2<members xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"> 3 <person> 4 <name>明智光秀</name> 5 <kana>あけちみつひで</kana> 6 <birthday>xxxx年xx月xx日</birthday> 7 <text>サンプルテキストサンプルテキスト</text> 8 </person> 9 <person> 10 <name>芦名盛氏</name> 11 <kana>あしなもりうじ</kana> 12 <birthday>xxxx年xx月xx日</birthday> 13 <text>サンプルテキストサンプルテキスト</text> 14 </person> 15 <person> 16 <name>井伊直弼</name> 17 <kana>いいなおすけ</kana> 18 <birthday>xxxx年xx月xx日</birthday> 19 <text>サンプルテキストサンプルテキスト</text> 20 </person> 21 <person> 22 <name>石田三成</name> 23 <kana>いしだみつなり</kana> 24 <birthday>xxxx年xx月xx日</birthday> 25 <text>サンプルテキストサンプルテキスト</text> 26 </person> 27 <person> 28 <name>今川義元</name> 29 <kana>いまがわよしもと</kana> 30 <birthday>xxxx年xx月xx日</birthday> 31 <text>サンプルテキストサンプルテキスト</text> 32 </person> 33 <person> 34 <name>上杉謙信</name> 35 <kana>うえすぎけんしん</kana> 36 <birthday>xxxx年xx月xx日</birthday> 37 <text>サンプルテキストサンプルテキスト</text> 38 </person> 39 <person> 40 <name>大塩平八郎</name> 41 <kana>おおしおへいはちろう</kana> 42 <birthday>xxxx年xx月xx日</birthday> 43 <text>サンプルテキストサンプルテキスト</text> 44 </person> 45 <person> 46 <name>織田信長</name> 47 <kana>おだのぶなが</kana> 48 <birthday>xxxx年xx月xx日</birthday> 49 <text>サンプルテキストサンプルテキスト</text> 50 </person> 51 <person> 52 <name>柿崎景家</name> 53 <kana>かきざきかきいえ</kana> 54 <birthday>xxxx年xx月xx日</birthday> 55 <text>サンプルテキストサンプルテキスト</text> 56 </person> 57 <person> 58 <name>片倉景綱</name> 59 <kana>かたくらかげつな</kana> 60 <birthday>xxxx年xx月xx日</birthday> 61 <text>サンプルテキストサンプルテキスト</text> 62 </person> 63 <person> 64 <name>黒田官兵衛</name> 65 <kana>くろだかんべえ</kana> 66 <birthday>xxxx年xx月xx日</birthday> 67 <text>サンプルテキストサンプルテキスト</text> 68 </person> 69 <person> 70 <name>小早川秀秋</name> 71 <kana>こばやかわひであき</kana> 72 <birthday>xxxx年xx月xx日</birthday> 73 <text>サンプルテキストサンプルテキスト</text> 74 </person> 75 <person> 76 <name>斎藤一</name> 77 <kana>さいとうはじめ</kana> 78 <birthday>xxxx年xx月xx日</birthday> 79 <text>サンプルテキストサンプルテキスト</text> 80 </person> 81 <person> 82 <name>柴田勝家</name> 83 <kana>しばたかついえ</kana> 84 <birthday>xxxx年xx月xx日</birthday> 85 <text>サンプルテキストサンプルテキスト</text> 86 </person> 87 <person> 88 <name>宗義智</name> 89 <kana>そうよしとし</kana> 90 <birthday>xxxx年xx月xx日</birthday> 91 <text>サンプルテキストサンプルテキスト</text> 92 </person> 93 <person> 94 <name>伊達政宗</name> 95 <kana>だてまさむね</kana> 96 <birthday>xxxx年xx月xx日</birthday> 97 <text>サンプルテキストサンプルテキスト</text> 98 </person> 99 <person> 100 <name>徳川家康</name> 101 <kana>とくがわいえやす</kana> 102 <birthday>xxxx年xx月xx日</birthday> 103 <text>サンプルテキストサンプルテキスト</text> 104 </person> 105 <person> 106 <name>豊臣秀吉</name> 107 <kana>とよとみひでよし</kana> 108 <birthday>xxxx年xx月xx日</birthday> 109 <text>サンプルテキストサンプルテキスト</text> 110 </person> 111 <person> 112 <name>直江兼続</name> 113 <kana>なおえかねつぐ</kana> 114 <birthday>xxxx年xx月xx日</birthday> 115 <text>サンプルテキストサンプルテキスト</text> 116 </person> 117 <person> 118 <name>新納忠元</name> 119 <kana>にいろただもと</kana> 120 <birthday>xxxx年xx月xx日</birthday> 121 <text>サンプルテキストサンプルテキスト</text> 122 </person> 123 <person> 124 <name>二階堂盛義</name> 125 <kana>にかいどうもりよし</kana> 126 <birthday>xxxx年xx月xx日</birthday> 127 <text>サンプルテキストサンプルテキスト</text> 128 </person> 129 <person> 130 <name>沼田景義</name> 131 <kana>ぬまたかげよし</kana> 132 <birthday>xxxx年xx月xx日</birthday> 133 <text>サンプルテキストサンプルテキスト</text> 134 </person> 135 <person> 136 <name>蜂須賀正勝</name> 137 <kana>はちすかまさかつ</kana> 138 <birthday>xxxx年xx月xx日</birthday> 139 <text>サンプルテキストサンプルテキスト</text> 140 </person> 141 <person> 142 <name>服部正成</name> 143 <kana>はっとりまさなり</kana> 144 <birthday>xxxx年xx月xx日</birthday> 145 <text>サンプルテキストサンプルテキスト</text> 146 </person> 147 <person> 148 <name>古田重然</name> 149 <kana>ふるたしげなり</kana> 150 <birthday>xxxx年xx月xx日</birthday> 151 <text>サンプルテキストサンプルテキスト</text> 152 </person> 153 <person> 154 <name>北条氏政</name> 155 <kana>ほうじょううじまさ</kana> 156 <birthday>xxxx年xx月xx日</birthday> 157 <text>サンプルテキストサンプルテキスト</text> 158 </person> 159 <person> 160 <name>前田慶次郎</name> 161 <kana>まえだけいじろう</kana> 162 <birthday>xxxx年xx月xx日</birthday> 163 <text>サンプルテキストサンプルテキスト</text> 164 </person> 165 <person> 166 <name>三好元長</name> 167 <kana>みよしもとなが</kana> 168 <birthday>xxxx年xx月xx日</birthday> 169 <text>サンプルテキストサンプルテキスト</text> 170 </person> 171 <person> 172 <name>毛利元就</name> 173 <kana>もうりもとなり</kana> 174 <birthday>xxxx年xx月xx日</birthday> 175 <text>サンプルテキストサンプルテキスト</text> 176 </person> 177 <person> 178 <name>森蘭丸</name> 179 <kana>もりらんまる</kana> 180 <birthday>xxxx年xx月xx日</birthday> 181 <text>サンプルテキストサンプルテキスト</text> 182 </person> 183 <person> 184 <name>山中幸盛</name> 185 <kana>やまなかゆきもり</kana> 186 <birthday>xxxx年xx月xx日</birthday> 187 <text>サンプルテキストサンプルテキスト</text> 188 </person> 189 <person> 190 <name>結城政朝</name> 191 <kana>ゆうきまさとも</kana> 192 <birthday>xxxx年xx月xx日</birthday> 193 <text>サンプルテキストサンプルテキスト</text> 194 </person> 195 <person> 196 <name>龍造寺鑑兼</name> 197 <kana>りゅうぞうじあきかね</kana> 198 <birthday>xxxx年xx月xx日</birthday> 199 <text>サンプルテキストサンプルテキスト</text> 200 </person> 201 <person> 202 <name>六郷政乗</name> 203 <kana>ろくごうまさのり</kana> 204 <birthday>xxxx年xx月xx日</birthday> 205 <text>サンプルテキストサンプルテキスト</text> 206 </person> 207 <person> 208 <name>和田信維</name> 209 <kana>わだのぶただ</kana> 210 <birthday>xxxx年xx月xx日</birthday> 211 <text>サンプルテキストサンプルテキスト</text> 212 </person> 213</members>
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8" /> 5 <meta content="width=device-width, initial-scale=1.0" name="viewport"> 6 <link rel="stylesheet" href="css/common.css"> 7 <link rel="stylesheet" href="css/style.css"> 8 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 9 <title>キャラクター紹介</title> 10</head> 11<body> 12 <header id="global-head"> 13 <!-- /ハンバーガーアイコン --> 14 <div id="menu-trigger"> 15 <span class="top"></span> 16 <span class="middle"></span> 17 <span class="bottom"></span> 18 </div> 19 20 <div id="select"> 21 <h2>キャラクター</h2> 22 <div id="index"> 23 <p class="index_jump">あ</p> 24 <p class="index_jump">か</p> 25 <p class="index_jump">さ</p> 26 <p class="index_jump">た</p> 27 <p class="index_jump">な</p> 28 <p class="index_jump">は</p> 29 <p class="index_jump">ま</p> 30 <p class="index_jump">や</p> 31 <p class="index_jump">ら</p> 32 <p class="index_jump">わ</p> 33 </div> 34 </div> 35 36 </header> 37 38 39<main> 40 <!-- /キャラクター紹介 --> 41 <div id="character_list"> 42 <!-- /xmlファイルから読み込んだ情報がcardに挿入される --> 43 </div> 44 45 </div><!-- /.flex_box --> 46</main> 47 48 49 <footer> 50 <address>フッター</address> 51 </footer> 52 53 54<script src="js/script.js"></script> 55 56</body> 57</html>
jQuery
1jQuery.extend({ 2 getXML:function(callback){ 3 $.ajax({ 4 url:'../xml/meibo.xml', 5 type:'get', 6 dataType:'xml', 7 success:function(data){ 8 //全員分のディクショナリを格納するリスト作成 9 var character_list = new Array(); 10 //<person>タグで囲ったものを人数分ループ処理 11 $('person',data).each(function(){ 12 var thisItem = $(this); 13 //連想配列の初期化 14 var character_dict = new Object(); 15 //スタッフリストXMLの各情報をcharacter_dictに代入 16 character_dict["name"] = thisItem.children('name').text(); 17 character_dict["kana"] = thisItem.children('kana').text(); 18 character_dict["birthday"] = thisItem.children('birthday').text(); 19 character_dict["text"] = thisItem.children('text').text(); 20 21 //<kana>のデータの先頭文字を切り取る 22 var initial = thisItem.children('kana').text().slice(0,1); 23 24 //character_dictをcharacter_listに追加 25 character_list.push(character_dict); 26 }); 27 callback(character_list); 28 } 29 }); 30 } 31}); 32//グローバル変数g_character_listを宣言 33var g_character_list; 34 35//HTMLを生成する処理の関数 36function makeHTML(character_list){ 37 //g_character_listを参照してHTMLを生成する 38 var character_content = ''; 39 40 character_list.forEach(function(character_dict){ 41 character_content += '<div class ="card">'; 42 43 character_content += '<ul>'; 44 45 //よみがな 46 character_content += '<p>'; 47 character_content += character_dict["kana"]; 48 character_content += '</p>'; 49 //名前 50 character_content += '<h2>'; 51 character_content += character_dict["name"]; 52 character_content += '</h2>'; 53 //誕生日 54 character_content += '<h4>'; 55 character_content += character_dict["birthday"]; 56 character_content += '</h4>'; 57 //概要コメント 58 character_content += '<h3>'; 59 character_content += character_dict["text"]; 60 character_content += '</h3>'; 61 character_content += '</ul>'; 62 63 character_content += '</div>'; //card 64 }); 65 return character_content; 66}; 67 68//データチェック用 69function callback(data){ 70 g_character_list = data; 71 $('#character_list').append(makeHTML(g_character_list)); 72}; 73 74 75//XML読み込み 76$.getXML(callback); 77
CSSは割愛します。
実現させるために考えたこと
・ajaxで読み取ったXMLデータの<kana>の頭文字をslice()を用いて切り取る（※記述済み）
・切り取った頭文字を基に判断
・該当するキャラクター情報に（.card）任意のaタグを付与（ページ内ジャンプするため）
・.index_jump（あかさたな～）をクリックしたらページ内ジャンプする（クリックイベント）
そのためにはどこの関数内でどのように処理を書けばいいのでしょうか？
ページ内ジャンプのことが書かれたサイトをいくつか見ましたが、あらかじめどの程度移動するかが前提として分かっているのが多く、こちらのケースでは適さないので困っています…。
上記ではaタグを付与と書きましたが、これ以外でこちらのケースに適する方法がありましたらご教授いただければ幸いです。
よろしくお願いいたします。
回答1件
0
自己解決
Javascript
1 $(".index_jump").on("click",function(){ 2 //.index_jumpの文字を取得 3 let initial = $(this).text(); 4 //あかさたな～の定義 5 let line_a = 'あいうえお'; 6 let line_ka = 'かきくけこ'; 7 let line_sa = 'さしすせそ'; 8 let line_ta = 'たちつてと'; 9 let line_na = 'なにぬねの'; 10 let line_ha = 'はひふへほ'; 11 let line_ma = 'まみむめも'; 12 let line_ya = 'やゆよ'; 13 let line_ra = 'らりるれろ'; 14 let line_wa = 'わ'; 15 //空の変数を用意 16 let filter = null 17 18 if (initial == 'あ') { 19 filter = line_a; 20 } 21 if (initial == 'か') { 22 filter = line_ka; 23 } 24 if (initial == 'さ') { 25 filter = line_sa; 26 } 27 if (initial == 'た') { 28 filter = line_ta; 29 } 30 if (initial == 'な') { 31 filter = line_na; 32 } 33 if (initial == 'は') { 34 filter = line_ha; 35 } 36 if (initial == 'ま') { 37 filter = line_ma; 38 } 39 if (initial == 'や') { 40 filter = line_ya; 41 } 42 if (initial == 'ら') { 43 filter = line_ra; 44 } 45 if (initial == 'わ') { 46 filter = line_wa; 47 } 48 49 let scroll_element_id = null; 50 51 //.cardをループ処理 52 for (let i = 0; i < $(".card").length; i++) { 53 let card_initial = $(".card")[i].id[0]; 54 console.log(card_initial); 55 if (filter.indexOf(card_initial)>=0) { 56 57 scroll_element_id = $(".card")[i].id; 58 console.log(scroll_element_id); 59 break 60 } 61 } 62 63 $(window).scrollTop($('#'+scroll_element_id).offset().top); 64 65 });
投稿2020/10/05 06:09
総合スコア74
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。