iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 22
0
自我挑戰組

JavaScript基礎30天系列 第 22

JS 代辦事項 基礎教學(2) DAY22

今天我們要來介紹
如何把資料呈現再畫面上啦~~~
我們先看看如何撰寫

function updateList(items){
    let str = '';
    let itemsLen = items.length;
    for(let i = 0 ; i < itemsLen ; i++){
        str+= `<li>
                    <i class="fas fa-trash text-danger mr-3 mb-2 trash" data-index = ${i}>
                    </i>
                    <span>${items[i].content}</span>
                </li>
            `
    }
    list.innerHTML = str;
}

這裡我們利用到的技巧為 ES6 + dataset + 組字串
跟前面提到的innerHTML是不是很像!!
ES6: 反引號包裹要組的字串 變數用 ${}包裹
不過這裡要注意一點
我們有使用 dataset 的技巧
這樣有利於我們接下來要介紹的刪除代辦事項


刪除代辦事項
這裡我們使用到陣列的splice方法

function deleteData(e){
    e.preventDefault();
    if(e.target.nodeName !== 'I'){return};
    var index = e.target.dataset.index;
    data.splice(index, 1);
    localStorage.setItem('listData', JSON.stringify(data));
    updateList(data);
}

當然刪除後
也是要 更新畫面資料 與 更新localStorage

最後附上練習的原始碼
CodePen:https://codepen.io/wemyferb/pen/KKMPpOP
明天我們將會介紹
如何計算 BMI
過重的要面對現實囉!!!
有沒有緊張呢!!/images/emoticon/emoticon37.gif

那todoList的部分就到這裡囉
有任何問題都可以詢問我唷!!


上一篇
JS 代辦事項 基礎教學(1) DAY21
下一篇
JS BMI 基礎介紹(1) DAY23
系列文
JavaScript基礎30天30

尚未有邦友留言

立即登入留言