資料模型製作、存取與修改
步驟
- 開始建構資料模型
定義一個陣列 - 陣列裡面要有物件，開始編號
- 定義資料清單html模板：項目與總價
- 將内部”取代成’
- 清除換行空格
- 將變動資料抽換成取代定義符號
- 製作迴圈，跑出item_html模板
- 建立一個取代變數，將html模板的取代資訊用2的資料代掉(re_item_html)
- 取代數字
- 取代名稱(定義變數item=list[i]，呼叫陣列list裡面的物件name)
- 取代價格
- 定義渲染函數showlist
- 先執行一次showlist
- 製作功能
建立新增按鈕功能- 新增輸入的資料，push，裡面用{}代表一連串動作
- 用val接收input資料
- 重新執行一次showlist
- 建立刪除按鈕功能：選取刪除按鈕
- 製作每個刪除按鈕的id：取代用符號{{del}}
- 將{{del}}取代成自定義編號del_i
- 刪除按鈕自定義編號
- 選取刪除用定義編號
- 建立移除功能
- 建立移除函數，鎖定移除値id(id是一個數字)
- splice(陣列中第幾筆資料，之中的第幾個)
- 抓取刪除用的id，新增取代用屬性{{item_del}}
- 將{{item_id}}取代為序數
- 定義id為序數
- remove(id)，id為陣列中第幾項資料，所以是數字
- parseInt，將資料轉換為數字
- 抓取刪除按鈕裡面的屬性(再透過上面replace轉化id値)
- 合計欄位
- 先執行出html模板
- 宣告變數 var re_total_html取代{{tot}}
- 定義變數total_price
- 製作total_price加總的動作
- 使用parseInt定義内部項目為數字
範例
#buylist
h1 My Buylist 購物清單
.item.control_panel
label 商品名
input#input_name(placeholder="名稱...")
label 價錢
input#input_price(placeholder="100")
span.add +新增
#list
//- li.item 1.吹風機
//- .price 100
//- .del ×
//- li.item 2.吹風機
//- .price 100
//- .del ×
//- li.item 3.吹風機
//- .price 100
//- .del ×
//- li.item 4.吹風機
//- .price 100
//- .del ×
//- li.item 5.吹風機
//- .price 100
//- .del ×
//- li.item.total 合計
//- .price 100
$black: #444
$yellow: #ffc954
$red: #ff3d4a
$white: #f3f3f3
*
// border: 1px solid $black
position: relative
font-family: 'Noto Sans TC'
font-weight: 400
transition-duration: 0.5s
html,body
width: 100%
height: 100%
margin: 0
display: flex
justify-content: center
align-items: center
background-color: $yellow
#buylist
position: absolute
padding: 20px
border: 4px solid $black
background-color: $white
box-shadow: 0px 0px 30px rgba(0,0,0,0.2)
h1
padding: 20px
margin-top: -20px
margin-left: -20px
margin-right: -20px
border-bottom: 4px solid $black
background-color: $red
color: $white
#list
padding: 5px
margin-top: 10px
.item
padding: 5px
list-style: none
border: 3px solid $black
margin-top: 10px
font-weight: 400
input
width: 100px
border: 3px solid $black
padding: 2px
.price
display: inline-block
position: absolute
padding-left: 8px
padding-right: 8px
right: 50px
background-color: $yellow
&:before
content: "$ "
.del
display: inline-block
position: absolute
// 上下0，左右6
padding: 0px 6px
right: 10px
cursor: pointer
&:hover
background-color: $red
color: #fff
.add
cursor: pointer
margin-left: 10px
padding: 5px
border: 3px solid $black
&:hover
background-color: $red
color: #fff
.control_panel
padding: 20px
.total
background-color: $red
color: $white
font-weight: 400
.price
background-color: transparent
var list = [];
// 2 陣列裡面要有物件，開始編號
list = [
{name: "吹風機",
price: 300},
{name: "麥克筆",
price: 9000},
{name: "筆記型電腦",
price: 54555},
{name: "iPhone 9",
price: 32000},
{name: "神奇海螺",
price: 5000},
];
// 3 定義資料清單html模板：項目與總價
// 3.1 將内部"取代成'
// 3.2 清除換行空格
// 3.3 將變動資料抽換成取代定義符號
// 9.1 製作每個刪除按鈕的id：取代用符號{{del}}
// 10.3 抓取刪除用的id，新增取代用屬性{{item_del}}
var item_html="<li class='item' >{{num}}.{{name}}<div class='price'>{{price}}</div><div class='del' id={{del}} data-del={{item_del}}>×</div></li>";
var total_html="<li class='item total'>合計<div class='price'>{{tot}}</div></li>";
// 6 定義渲染函數showlist
function showlist() {
// 8.4 每次執行：全部清空後執行
$("#list").html("");
// 11.3 定義變數total_price
var total_price = 0;
// 4 製作迴圈，跑出item_html模板
for(var i=0; i<list.length; i++) {
// 5 建立一個取代變數，將html模板的取代資訊用2的資料代掉(re_item_html)
var item = list[i];
// 9.3 刪除按鈕自定義編號
var del_i = "del_" + i;
// 10.5 定義id為序數
var id = i;
// 11.4 製作total_price加總的動作
// 11.5 使用parseInt定義内部項目為數字
total_price += parseInt(item.price);
var re_item_html =
// 5.1 取代數字
item_html.replace("{{num}}", i + 1)
// 5.2 取代名稱(定義變數item=list[i]，呼叫陣列list裡面的物件name)
.replace("{{name}}", item.name)
// 5.3 取代價格
.replace("{{price}}", item.price)
// 9.2 將{{del}}取代成自定義編號del_i
.replace("{{del}}", del_i)
// 10.4 將{{item_id}}取代為序數
.replace("{{item_del}}", id);
$("#list").append(re_item_html);
// 9 建立刪除按鈕功能，選取刪除按鈕
// 9.4 選取刪除用定義編號
$("#" + del_i).click(
function() {
// 10.6 remove(id)，id為陣列中第幾項資料，所以是數字
// 10.7 parseInt，將資料轉換為數字
// 10.8 抓取刪除按鈕裡面的屬性(再透過上面replace轉化id値)
remove(parseInt($(this).attr("data-del")));
}
);
}
// 11 合計欄位
//11.2 宣告變數 var re_total_html取代{{tot}}
var re_total_html = total_html.replace("{{tot}}", total_price);
// 11.1 先執行出html模板
$("#list").append(re_total_html);
}
// 7 先執行一次showlist
showlist();
// 7**：資料建構完畢，接下來製作功能
// 8 建立新增按鈕功能
$(".add").click(
function() {
// 8.1 新增輸入的資料，push，裡面用{}代表一連串動作
list.push({
// 8.2 用val接收input資料
name: $("#input_name").val(),
price: $("#input_price").val()
});
// 8.3 重新執行一次showlist
showlist();
}
);
// 10 建立移除功能
// 10.1 建立移除函數，鎖定移除値id(id是一個數字)
// 10.2 splice(陣列中第幾筆資料，之中的第幾個)
function remove(id) {
list.splice(id, 1);
showlist();
}
Display