JS 筆記 - dataset 與 Array 的運用

data-*

簡單來說，就是可以在 HTML 標籤內直接新增物件的寫法，並透過 data-* 可以帶入想要的值。

藉由增加 data-_ 屬性，即使是普通的 HTML 元素也能變成複雜而強大程式物件。例如說遊戲裡面的太空船精靈 能成為帶有 class 與數個 data-_ 屬性的 <img> 元素：

<img
  class="spaceship cruiserX3"
  src="shipX3.png"
  data-ship-id="324"
  data-weapons="laserI laserII"
  data-shields="72%"
  data-x="414354"
  data-y="85160"
  data-z="31940"
  onclick="spaceships[this.dataset.shipId].blasted()"
/>

dataset

透過 JS 的可以綁定 data-* 並取出中的值。

HTML

寫一個範例，在 li 中自訂 data-* 新增兩個項目與值:

<ul class="list">
  <li data-num="0" data-dog="3">提姆</li>
</ul>

當今天點選到 li 時，要取出 .list 裡面的 li 的 data-* 的值。
透過監聽事件，

JavaScript

var list = document.querySelector(".list");

//確認點擊的 li 是誰
function checkList(e) {
  var num = e.target.dataset.num;
  //宣告 num 變數中的事件目標，透過 dataset 取出 num 的值
  var dog = e.target.dataset.dog;
  //宣告 dog 變數中的事件目標，透過 dataset 取出 num 的值
  console.log(`編號是${num}`); //編號是 0
  console.log(`有 ${dog} 隻狗`); //有 3 隻狗
}
list.addEventListener("click", checkList, false);

codepen:https://codepen.io/hnzxewqw/pen/abZZaKb?editors=1111

---

dataset + Array

透過 dataset 可以實現取得 Array 資料的方式，會結合之前所學的綜合應用。

練習主題

目前有一個資料，裡面有商店店長的名字，透過 data-* 自定義名稱，透過 JS 抓出資料後並渲染置網頁。

得到的條件有:

1. JSON 資料。
2. 要使用 data-* 命名。
3. 使用 for 迴圈抓出店長資料。
4. 使用 innerHTML 渲染網頁。

JSON 資料

var shops = [{
  keeper: '魯夫'
}, {
  keeper: '香吉士'
}]

HTML 架構

<ul class="list"></ul>

JS

var list = document.querySelector(".list");

前面有學習過，如果綁定多個 li，就要建立許多監聽事件，也可以這樣寫，但會降低網頁效能，所以這邊直接綁定父元素去控制子元素。

因為要透過 JS 動態加入 li 到網頁上，所以增加一個更新清單函式並且執行它，讓這個函式裡面去跑 for 迴圈，將 JSON 中所需要的資料抓出來，在透過 innerHTML 印在 li 中，更新於網頁上。

function updateList() {
  var str = ""; //組一個字串，內容為空
  var shopLen = shops.length; //資料長度 2
  for (var i = 0; shopLen > i; i++) {
    str += `<li data-num=${i}>${shops[i].keeper}</li>`;
  } //字串加總
  list.innerHTML = str; //渲染到字串，並渲染到網頁
  console.log(str); // <li data-num="0">魯夫</li><li data-num="1">香吉士</li>
}
updateList(); //執行函式

在剛剛綁定的 list 變數中增加監聽事件:

list.addEventListener("click", checkList, false);

渲染後的值在滑鼠點擊 li 的時候，可以增加滑鼠事件，在點擊後可以知道點擊到的內容是什麼。

function checkList(e) {
  var num = e.target.dataset.num;
  //宣告一個 num ，當事件目標為自己，dataset 取出 num 的值
  console.log(e.target.nodeName); //確認 nodeName 是否為 'LI'
  if (e.target.nodeName !== "LI") {
    return;
  } //若選到的 nodeName 不是 LI，就回傳(停止函式)
  console.log(`你選擇的店長為 ${shops[num].keeper}`); //顯示選擇內容
}

這樣就可以透過 dataset 的方式，去選取在 HTML 中使用 data-* 的方式，取得 Array 的資料內容!

codepen: https://codepen.io/hnzxewqw/pen/JjdJmJK