完成後的成品
觀察須製作的功能
- 重新整理網頁後，保有過去執行的狀態：localstorage
- 實作內有使用:
- localstorage:setItem,getItem
- jason.stringfy/jason.parse
- 在new transation輸入資料後，會將資料傳入history中
- add transation之後，頁面不會刷新(spa)(e.preventdefault)
- 摸到history中的項目，會出現刪除符號，點擊後刪除
- 輸入的金額，會顯示於上方income、expense，並且計算總額
- 有正負值
- 計算收入、花費
呈現完整語法
1 | $(document).ready(function () { |
各項目拆解：
add transations按下去之後，頁面不刷新，直接將資料傳入紀錄中
1 | $(document).ready(function () { |
- 加入
e.preventDefault();用來阻止預設動作的發生
讓transation輸入後顯示
1 | $(document).ready(function () { |
- 提交之後清空
- 選擇該輸入框，並利用
val()，使內部的值清空
- 選擇該輸入框，並利用
1 | $('#text').val(''); |
從表格中取得值
- 製作按鈕的點擊事件，取得表格中的值
- 將值傳入函式的參數
addTransactions(text_val, amount_val);1
2
3
4
5
6
7
8
9
10
11
12$(document).ready(function () {
$('.btn').click(function (e) {
e.preventDefault();
console.log('click');
//取得表格中的值
const text_val = $('#text').val();
const amount_val = $('#amount').val();
addTransactions(text_val, amount_val);
})
});
製作刪除紐
- 原本的撰寫方式，為選到最後一個刪除鈕，並點擊加以刪除
- 此方式造成，無法確實刪除資料
1 | $('.delete-btn').last().click(function () { |
修改方式，只能綁定一筆transatin或是綁定最後一筆
查看若實現點擊後刪除，是會刪除什麼？
1
2
3
4$('.delete-btn').last().click(function () {
console.log(this);
})
}
要刪除的是整筆資料，所以要去尋找他鄰近的元素
1
2
3$('.delete-btn').last().click(function () {
$(this).parent().remove();
})
localstorage 執行
筆記補充：LocalStorage介紹
從此實作，可以看到它是一個陣列，裡面是物件
- 設置一個空陣列
- 並將物件push進去
1 | //預設值的設置，取得存在本地的資料或是空陣列 |
- 增加初始function
1
2
3
4
5
6
7
8
9
10
11
12
13
14//init
function initHistory(transactions) {
transactions.forEach(transaction => {
addTransactions(transaction.name, transaction.amount);
});
}
//將此函式放於 $(document).ready()之中
//陣列初始
if (transactions.length > 0) {
initHistory(transactions);
}
將transation刪除後，並沒有完全從localstorage刪除
運用id來刪除
從此段落：localstorage 執行，圖片中的存取陣列可以看到，沒有設置id
id是在addTransactions使用
1
2
3
4
5
6
7
8// Generate random ID
function generateID() {
return Math.floor(Math.random() * 100000000);
}
//floor：無條件捨去
//ceil：無條件進位在創造的陣列中\物件，都加入id
1
2
3
4
5
6
7
8
9
10const id = generateID();
addTransactions(id, text_val, amount_val);
//推入陣列
transactions.push({
id: id,
name: text_val,
amount: amount_val
})在addTransactions的函式中也要加入id
1
2
3
4function addTransactions(id, name, amount) {
console.log(id, name, amount);}
- 在button加入data-id
和資料有關的時候：data-原來欄位名稱
1 | const Transaction_str = `<li class='plus' >${name}<span> ${amount}</span><button class="delete-btn" data-id="${id}">x</button></li>` |
- 確定點擊刪除鈕的時後，是有抓到該id
1
2
3
4
5
6
$('.delete-btn').last().click(function () {
$(this).parent().remove();
let id = $(this).data('id');
console.log(id);
}) let id = $(this).data(); 查看id時取得的是物件
- 應改為
此時還沒有真正刪除id，只是確定有抓到id :point_up_2:
jquery data()： 自定義屬性 (data attributes)，讓我們可以任意讀寫資料在元素上，而且不會影響頁面的 layout
jQuery Data
利用forEach、splice()刪除陣列內的資料
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22function deleteFromLocalstorage(transactions, id) {
transactions.forEach(function (item, index, arr) {
//console.log('item', item);
//console.log('index', index);
//console.log('arr', arr);
if (item.id === id) {
arr.splice(index, 1);
}
});
//迴圈刪除後，要儲存到localStorage才有確實刪去
localStorage.setItem('Transactions', JSON.stringify(transactions));
}
````
* 查看迴圈的資料
* 確實刪除存在localstorage的資料
```javascript
localStorage.setItem('Transactions', JSON.stringify(transactions));
判斷輸入的數字大小，並給予class
- 放在addTransactions()函式之中
1 | const Transaction_str = $('<li></li>').appendTo('#list'); |
數值的更新
1 | function updateValue(transactions) { |
- 創造一個amount的陣列
1 | const amounts_arr = transactions.map(function (transaction) { |
- 計算加總數值
1
2
3
4
5
6var total = 0;
$.each(amounts_arr, function () { total += parseFloat((this)) || 0; });
//傳回YOUR BALANCE
$('#balance').text(`$${total}`);
console.log(total);
- income 收入加總計算
1 | //從陣列找出>0的值，放置income |
- expense支出加總
1 | //從陣列找出<0的值，放置expense |
錯誤修正：
- 調換推入陣列以及
addTransactions的順序
1 | //點擊按鈕的事件 |
- 將updateValue()放入事件中
1 | //刪除鈕 要交易交出後再綁事件 |
