tototo6 score 5
2017/01/08 09:31 投稿
| jQuery、jsonを使いボタンでオンオフできるメンバーリストを作成したい |
| ###実現したいこと |
| 社内ホームページのようなものを作成しており |
| 社員表をjQuery、jsonを利用し、作成しましたが |
| ローカルで確認をしたところ、Firefoxでは期待する表示がされましたが、 |
| safariでは表示がされませんでした。（当方mac環境） |
| chromeではローカルでjsonが確認できないということなので表示されませんでした。 |
| ###発生している問題・エラーメッセージ |
| リストボタンのオン、オフで表示、非表示の切り替えをできるようにしたいのですが |
| 最初のoff状態からonに切り替えても反応をしません。 |
| ###該当のソースコード(json) |
| ``` |
| [{ |
| "a": "○○課", |
| "aa": [ |
| { |
| "name": "ああ", |
| "skill": "いい", |
| "date": "うう" |
| }, |
| { |
| "name": "ええ", |
| "skill": "おお", |
| "date": "かか", |
| "date": "かか" |
| } |
| ], |
| "b": "△△課", |
| "bb": [ |
| { |
| "name": "きき", |
| "skill": "くく", |
| "date": "けけ" |
| }, |
| { |
| "name": "ここ", |
| "skill": "ささ", |
| "date": "しし" |
| } |
| ], |
| "c": "□□課", |
| "cc": [ |
| { |
| "name": "すす", |
| "skill": "せせ", |
| "date": "そそ", |
| "date": "そそ" |
| }, |
| { |
| "name": "たた", |
| "skill": "ちち", |
| "date": "つつ" |
| } |
| ] |
| }] |
| ``` |
| ###該当のソースコード(jQuery) |
| ``` |
| // toggleの代わり |
| $.fn.clickToggle = function (a, b) { |
| return this.each(function () { |
| var clicked = false; |
| $(this).on('click', function () { |
| clicked = !clicked; |
| if (clicked) { |
| return a.apply(this, arguments); |
| } |
| return b.apply(this, arguments); |
| }) |
| }) |
| } |
| // list選択時のボタンのonoff |
| $(function(){ |
| $('.btn').on('click', function(){ |
| $(this).toggleClass('btn_active'); |
| }); |
| }); |
| $(".view").on("click",function(){ |
| $(this).toggleClass("open close"); |
| }); |
| // 空のdivにデータにjsonを渡す |
| $(function() { |
| $('#button_1').clickToggle(function(){ |
| $.getJSON("./json/xxx.json",function(list){ |
| for(var i in list) { |
| var o = '<p>課：' |
| + list[i].a |
| + '</p>' |
| $("div#a_a").append(o); |
| for(var j in list[i].a) { |
| var h = '<div>' |
| + '<div>' |
| + list[i].a[j].picture |
| + '</div>' |
| + '<dl>' |
| + '<dt>' |
| + list[i].a[j].name |
| + '</dt>' |
| + '<dd>' |
| + '<span>名前：</span>' + list[i].a[j].here_date |
| + '</dd>' |
| + '<dd>' |
| + '<span>年齢：</span>' + list[i].a[j].blood_type |
| + '</dd>' |
| + '</dl>' |
| + '</div>' |
| $("div#a_a").append(h); |
| } |
| } |
| }); |
| }, function() { |
| $("div#a_a").empty(); |
| } |
| ); |
| }); |
| ``` |
| ###該当のソースコード(html) |
| ``` |
| <section> |
| <ul> |
| <li> |
| <button type="button" name="○○課" class="btn" id="button_1"> |
| ○○課 |
| </button> |
| </li> |
| <li> |
| <button type="button" name="△△課" class="btn" id="button_2"> |
| △△課 |
| </button> |
| </li> |
| <li> |
| <button type="button" name="□□課" class="btn" id="button_3"> |
| □□課 |
| </button> |
| </li> |
| </ul> |
| <div> |
| <div id="a_a"></div> |
| <div id="b_b"></div> |
| <div id="c_c"></div> |
| </div> |
| </section> |
| ``` |
| ###補足 |
| 色々ネットで調べたところ、.ajaxを使えば良いかと思ったのですが |
| .ajaxは文字化けした際や詳細なオプションを指定する際に使うもので |
| 今回のような簡単なjsonを読み込む際は.getJSONで良いものなのでしょうか？ |
| .getJSONのまま間違いを正し、各ブラウザで正常に動作できることはできるのでしょうか？ |
| お手数をおかけいたしますが、ぜひご教授ください |
