質問編集履歴

1 ソースコードの修正

tototo6

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のまま間違いを正し、各ブラウザで正常に動作できることはできるのでしょうか?
お手数をおかけいたしますが、ぜひご教授ください
  • JavaScript

    26411 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    15783 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    10270 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • HTML5

    6898 questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • JSON

    1938 questions

    JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る