Q&A
te2jiさん、
ご回答ありがとうございます。
参考になります。
json
1quizz.jsonファイル 2 3{ 4 "currentNo": 1, 5 "quizzes": [ 6 { 7 "no": 1, 8 "mainText": "クイズNo1", 9 "img": "/img/test1.png", 10 "subText": "1.答えA 2.答えB 3.答えC 4.答えD" 11 }, 12 { 13 "no": 2, 14 "mainText": "クイズNo2", 15 "img": "/img/test2.png", 16 "subText": "1.答えA 2.答えB 3.答えC 4.答えD" 17 }, 18 { 19 "no": 3, 20 "mainText": "クイズNo3", 21 "img": "/img/test3.png", 22 "subText": "1.答えA 2.答えB 3.答えC 4.答えD" 23 }, 24 { 25 "no": 4, 26 "mainText": "クイズNo4", 27 "img": "/img/test4.png", 28 "subText": "1.答えA 2.答えB 3.答えC 4.答えD" 29 }, 30 { 31 "no": 5, 32 "mainText": "クイズNo5", 33 "img": "/img/test5.png", 34 "subText": "1.答えA 2.答えB 3.答えC 4.答えD" 35 } 36 ] 37}
HTMLソースコード
HTML
1<!DOCTYPE HTML> 2<html lang="ja"> 3 4<head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <title>クイズ</title> 8 <link rel="stylesheet" href="/css/html5reset-1.6.1.css"> 9 <link rel="stylesheet" href="/css/design.css"> 10 11</head> 12 13<body> 14 <main> 15 <div class="team_box"> 16 <ul class="team_list"> 17 </ul> 18 </div> 19 <div class="quizz_boz"> 20 <h1 class="mainText"></h1> 21 <img class="img" src="" alt=""> 22 <p class="subText"></p> 23 </div> 24 </main> 25 26 <script src="/jquery/jquery-3.3.1.min.js"></script> 27 <script src="/jquery/common.js"></script> 28</body> 29 30</html>
Jqueryソースコード
Jquery
1 2$(function () { 3 $.getJSON("/json/quizz.json", function (quizz) { 4 var q = quizz["quizzes"]; 5 console.log(q); 6 var count = 0; 7 setInterval(function (callback){ 8 var check = $('.mainText').text(q[count].mainText); 9 $('.img').attr('src',q[count].img); 10 $('.subText').text(q[count].subText); 11 count++; 12 console.log('check'); 13 if(count >=q.length) { 14 count = 0; 15 return callback; 16 } 17 },1000); 18 }); 19 20});
#やりたいこと
JsonファイルのcurrentNoの値（数字）を変更するとHTML上に自動的にリロードされ、変更した数字のquizzesのnoをひょうじさせる。
例えば：
Jsonファイルの中にcurrentNoは”2” 変更すると
HTML上に自動的にリロードされ
クイズ(quizzes)の
"no": 2,
"mainText": "クイズNo2",
"img": "/img/test2.png",
"subText": "1.答えA 2.答えB 3.答えC 4.答えD"
を表示させたいです。
助けてください。
よろしくお願いいたします。
回答4件
0
JsonファイルのcurrentNoの値（数字）を変更するとHTML上に自動的にリロードされ
サーバにあるJSONファイルの変更を検知して、ブラウザの表示を変更する、ということですよね？
ポーリングとかするしかないのでは。
Async Functionでポーリングを書くとループになるので簡潔でよい - Qiita
投稿2019/08/29 00:23
総合スコア36074
0
言ってることがよく分かってませんが、
Jsonファイルの中にcurrentNoは”2” 変更する
をイベントとして拾えるなら、それをトリガーに DOM を変更すればよいです。
投稿2019/08/28 20:36
退会済みユーザー
総合スコア0
自動リロードの話は一旦置いといて、
JsonファイルのcurrentNoとquizzesのno紐づけしたいですがJqueryでどう書けば行けるんでしょうか？
0
あなたが言っててることって、
もしかしてjQueryではなく
VueやReactなどモダンなjsライブラリでやっと実現した、リアクティブなフレームワークの仕様ではありませんか？
投稿2019/08/28 18:02
総合スコア973
H40831さん、
ご回答ありがとうございます。
そうですね,Jqueryで実現できるかどうかわからないですが、
もうちょっと調べます。
自動リロードの話は一旦置いといて、
JsonファイルのcurrentNoとquizzesのno紐づけしたいですがJqueryでどう書けば行けるんでしょうか？
0
どういった環境で自動リロードしたいのか不明な為、質問に答えようがありません。
とはいえ、突き放すのもアレなんで開発環境での話であればbrowsersyncを利用すれば自動的にリロードすることは可能です。
投稿2019/08/28 11:02
総合スコア23
youhey5488さん、
ご回答ありがとうございます。
参考になります
自動リロードの話は一旦置いといて、
JsonファイルのcurrentNoとquizzesのno紐づけしたいですがJqueryでどう書けば行けるんでしょうか？
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/08/29 07:15
2019/08/29 07:49
2019/08/29 08:04
2019/08/29 08:40