@lionecesiaposted at 2020-09-23

jsonとJavaScriptのコードの理解

Q&A

Closed

JavaScriptとJsonとJqueryのコードの解読について

JS初心者の自分が、複雑なコードに取り組んでみました。
基礎的な文法は学習していたが、HTMLやCSSの組み合わせでの理解は
出来ていません。
コードは丸写しです。

よくわからないコード

 $.ajax({
    url: "./information.json",
    dataType: "json"
  })
  .done(function(json){

    var idx = 0; 
    var $info = $(".info__list .item");
    $info.find("time").text(json[idx].date);
    $info.find("p").text(json[idx].value);

    setInterval(function(){
      if(idx === json.length -1){
        idx = 0;
      } else {
        idx = idx + 1;
      }
      $info.css("opacity",0);

      setTimeout(function(){
        $info.find("time").text(json[idx].date);
        $info.find("p").text(json[idx].value);
        $info.css("opacity",1);
      },500);

    },5000)

  });
//JavaScript
単純なミス　});のつけ忘れ

今後することはJavaScriptの制作で使う関数の学習です。

記事のコードを使った書き方も学びます。

2Answer

@tukiyo3 posted at 2020-09-25

なにを質問したいのかわかりませんが、エスパーしました。

$.ajax({
	url: "./information.json",
	dataType: "json"
})
.done(function(json){
	var idx = 0; 
	var $info = $(".info__list .item");
	$info.find("time").text(json[idx].date);
	$info.find("p").text(json[idx].value);
	setInterval(function(){
		if(idx === json.length -1){
			idx = 0;
		} else {
			idx = idx + 1;
		}
		$info.css("opacity",0);
		setTimeout(function(){
			$info.find("time").text(json[idx].date);
			$info.find("p").text(json[idx].value);
			$info.css("opacity",1);
			},500);
		},5000);
});

information.json を読み込んだら
.info__list .item クラスの要素を全て取ってきて $info に格納し、
$info 内の time と p タグの文字を information.json の配列を 5秒毎に行う
最初は文字を透過しているが、0.5秒後に透過をやめる (非表示を表示させる)
information.json の中身の分、繰り返す

という意味かと思います。

0Like

@lionecesia posted at 2020-09-25

@tukiyo3 様
アドバイスをいただきありがとうございます。
質問したい内容を明確にして、編集して
投稿してみます。
コードの理解ができました。