###実現したいこと
社内ホームページのようなものを作成しており
社員表をjQuery、jsonを利用し、作成しましたが
ローカルで確認をしたところ、Firefoxでは期待する表示がされましたが、
safariでは表示がされませんでした。(当方mac環境)
chromeではローカルでjsonが確認できないということなので表示されませんでした。
###発生している問題・エラーメッセージ
リストボタンのオン、オフで表示、非表示の切り替えをできるようにしたいのですが
最初のoff状態からonに切り替えても反応をしません。
###該当のソースコード(json)
[{ "a": "○○課", "aa": [ { "name": "ああ", "skill": "いい", "date": "うう" }, { "name": "ええ", "skill": "おお", "date": "かか" } ], "b": "△△課", "bb": [ { "name": "きき", "skill": "くく", "date": "けけ" }, { "name": "ここ", "skill": "ささ", "date": "しし" } ], "c": "□□課", "cc": [ { "name": "すす", "skill": "せせ", "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のまま間違いを正し、各ブラウザで正常に動作できることはできるのでしょうか?
お手数をおかけいたしますが、ぜひご教授ください
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/01/08 00:44
2017/01/08 01:28 編集
2017/01/12 10:38