jQuery toggleClass example

Toggle class name on click in jQuery

by aarkuo17

HTML

<button class="btn">遊樂園資訊</button>
	<ul class="info">
	</ul>
	<script type="text/javascript">

	</script>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

.info{
  color: white;
}

li{
  list-style: none; color: white;
  }
  
.isloading{
		display: block;
		background-color: #4CAF50;
}

JavaScript

$(document).ready(function(){
			$('.btn').on('click',function(){
// 1.簡單測試抓到資料功能
$.ajax({
url:'https://ruienyuski.github.io/git_test/data.json',
success:function(response){$('.info').html('抓到資料囉!');},
error:function(xhr){alert("發生錯誤: " + xhr.status + " " + xhr.statusText);}
 });
 //w3c：如何使用錯誤設置來應對一個AJAX請求錯誤。
 //https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_ajax_ajax_error

//2.顯示json 在網頁上
$.ajax({ 
    type: 'GET', // post/get
    url: 'https://ruienyuski.github.io/git_test/data.json',  // url位置
    //data: { querytag: data },       // 輸入的資料
    dataType: 'json', 
    //async: false //啟用同步請求
    success: function (response) { 
        $.each(response, function(index, element) {
        //$.each成功後執行的函數(respnose)
//index,element兩者都可隨意命名，index:選擇器的index位置，element；當前的元素
            $('.info').append(
              $('<li>', 
              {text: [index+1]+'.'+'名稱：'+element.place}),
              $('<li>',
              {text: [index+1]+'.'+'地址：'+element.address}),
              $('<p>')
              );
        });
    },
    error:function(xhr){//https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_ajax_ajax_error
    alert("發生錯誤: " + xhr.status + " " + xhr.statusText);
    } 
});

			});
		});