iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 29
0
自我挑戰組

JavaScript學習日誌系列 第 29

學習日誌29-作業練習

  • 分享至 

  • xImage
  •  

高雄旅遊資訊網練習作業

練習重點 :

  • 抓取JSON資料
  • 下拉選單 change 事件 / 按鈕 click 點擊事件
  • 抓對資料後,組字串印回頁面上

作業範例

  1. 建構html,有下拉選單/按鈕,以及空的 div.list (用來組字串印回來用)
<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>
  1. JS部分,宣告 data,把JSON陣列資料放進去,然後各事件處理綁定及監聽,跑 getData 函式
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); //下拉選單監聽事件

  1. 熱門地區按鈕總數,並對指定按下的按鈕做監聽點擊觸發事件,跑 getData 函式
for (i = 0; i < btn.length; i++) {
    btn[i].addEventListener('click', getData, false)
};
  1. 命名 getData 函式,並處理各事項
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;; //更改網頁標題
}

上一篇
學習日誌28-JS開發邏輯思維
下一篇
學習日誌30-心得
系列文
JavaScript學習日誌30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言