學習日誌21-localstorage(瀏覽器資料儲存)2

11th鐵人賽

古德瑞

2019-10-06 20:40:16

2753 瀏覽

分享至

data-* 透過dataset讀取自訂資料

在html標籤裡，可以自訂一些屬性，利用dataset去自訂。
例如在li標籤自訂 num 表示數字， runner 表示跑者，並給於數值。

<ul class="list">
   <li data-num="0" data-runner="1">穩哥</li>
</ul>

用JS去撈出資料

宣告 list 去選定li
命名 checkList 函式
宣告 num、runner 用 **e.target.dataset ** 各自對應
用 console.log 確認有無抓到這兩個值
最後監聽點擊 list 的 li 事件

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

function checkList(e){
  var num = e.target.dataset.num;
  var runner = e.target.dataset.runner;
  console.log('第 '+num+ ' 位跑者');
  console.log('跑者標號是 '+runner);
}
list.addEventListener('click',checkList,false);

dataset、array運用

把陣列把資料插進 html 並用 dataset 抓取資料練習

html部分，建立空的 ul.list ，待會用JS插入資料

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

JS部分，建立陣列及宣告 list 指定 html的 ul標籤

var roadRunning = [
  {
    ruuner:'村長'
  }
  ,{
    ruuner:'妙妙'
  }
]
var list = document.querySelector('.list');

命名 updateList 函式，用來把陣列資料插入 ul 裡，並執行此函式
I. 宣告 str 先空值等會用來放要插入的字串組合
II. 宣告 len 放整陣列的總數
III. 跑迴圈，插入字串'<li data-num="'+i+'">' + 陣列的跑者 + '</li>'
IV. 用 str+= 累計每一次跑的結果
V. 用 list.innerHTML 把 str 資料插入 html 的 ul 裡

function updateList(){
  var str = '';
  var len = roadRunning.length;
  for(var i = 0;len>i;i++){
    str+='<li data-num="'+i+'">'+roadRunning[i].ruuner+'</li>'
  }
  list.innerHTML = str;
}
updateList();

命名 checkList 函式，用來確認點擊的跑者是誰
I. 宣告 num 指定 e.target.dataset.num 紀錄點擊的 data-num 屬性的編號
II. 可以先 console.log 確認點擊的節點是誰
III. 使用 IF判斷if(e.target.nodeName !== 'LI'){return} 假如點擊的不是 li，就用 return 來去中斷，不讓程式繼續讀下去
IV. 如果點擊是 li 就執行 console.log 跑者是誰
V. 最後監聽點擊 list 的 checkList 事件

function checkList(e){
  var num = e.target.dataset.num;
  console.log(e.target.nodeName);
  if(e.target.nodeName !== 'LI'){return};
  console.log('你選擇的跑者是'+roadRunning[num].ruuner)
}
list.addEventListener('click',checkList,false);