jQuery toggleClass example

Toggle class name on click in jQuery

by aarkuo17

HTML

<button class="btn">遊樂園資訊</button> //按下按鈕顯示下方內容
<ul class="info">
// json資料轉成li顯示於此
</ul>

CSS

li{list-style: none;}

JavaScript

var xhr = new XMLHttpRequest();
		xhr.open('get','https://ruienyuski.github.io/git_test/data.json',true);//已經填上格式, 要讀取的網址,同步與非同步
// true 非同步，不會把資料傳回，就讓程式繼續執行，等到回傳到資料才會自動回傳
// false 同步，他會等資料傳回來，才讓程式繼續執行
xhr.send(null);//只是要get資料，並沒有打算傳送任何資料過來所以輸入null
		xhr.onload = function(){//onload 資料有回傳時(readyStatus:4)就可執行function
    
    // JSON.parse是string轉object,方便撈取資料
    // xhr.responseText 獲得字符串形式的響應數據。
			var datastr = JSON.parse(xhr.responseText);
			var info = document.querySelector('.info');
			var len  = datastr.length;
			var str= "";
			var btn = document.querySelector('.btn');
			btn.onclick = function(e){
			for (var i = 0; i < len; i++) {
				var content = '<p>'+'<li>名稱：'+datastr[i].place+'</li>'+'</p>'+'<p>'+'<li>地址：'+datastr[i].address+'</li>'+'</p>';
        console.log(content);
				str+=content;
				};
			info.innerHTML += str;
			};
		};