練習重點 :
<body>
<header>
<h1>高雄旅遊資訊網</h1>
<select name="areas" id="areas">
<option value="---請選擇地區---" selected>---請選擇地區---</option>
<option value="苓雅區">苓雅區</option>
<option value="三民區">三民區</option>
<option value="新興區">新興區</option>
<option value="鹽埕區">鹽埕區</option>
</select>
<div class="btns-group">
<p>熱門行政區</p>
<input type="button" value="苓雅區" class="btn">
<input type="button" value="三民區" class="btn">
<input type="button" value="新興區" class="btn">
<input type="button" value="鹽埕區" class="btn">
</div>
</header>
<main>
<h3 class="title">---請選擇地區---</h3>
<div class="list"></div>
</main>
</body>
var data = [{高雄旅遊資訊.JSON}];
//事件處理
var areas = document.getElementById('areas'); //選定下拉選單
var list = document.querySelector('.list'); //選定要渲染區塊
var title = document.querySelector('.title'); //選擇要更換的區域標題
var btn = document.querySelectorAll('.btn'); //選定熱門地區按鈕
areas.addEventListener('change', getData, false); //下拉選單監聽事件
for (i = 0; i < btn.length; i++) {
btn[i].addEventListener('click', getData, false)
};
function getData(e) {
var select = e.target.value; //指定選擇的值(苓雅區、三民區...等)
var array = []; //宣告空陣列,等待資料增加進去
// 抓取對應選擇的資料,放入空陣列裡
for (i = 0; i < data.length; i++) { //json資料的總數,跑迴圈
if (data[i].Zone == select) { //判斷json裡資料等同於選擇的值後,處理下面增加陣列資料的行為
array.push({
Add: data[i].Add, //加入地址
Name: data[i].Name, //加入場所名字
Opentime: data[i].Opentime, //加入開放時間
Tel: data[i].Tel, //加入場所電話
Picture1: data[i].Picture1 //加入場所照片url位置
});
}
}
// 把上面抓好的陣列資料,印回網頁上
var str = ''; //新增空字串
for (i = 0; i < array.length; i++) { //計算抓回來資料總數,跑迴圈
// 對應資料組字串
str += `<div>
<span style="background: url(${array[i].Picture1});background-size: cover;">
<p>${array[i].Name}</p>
</span>
<ul>
<li><i class="icon-time"></i>${array[i].Opentime}</li>
<li><i class="icon-map1"></i>${array[i].Add}</li>
<li><i class="icon-phone"></i>${array[i].Tel}</li>
</ul>
</div>`;
}
list.innerHTML = str; //印回網頁上
title.textContent = select;; //更改網頁標題
}