購物清單

資料模型製作、存取與修改

步驟

  1. 開始建構資料模型
    定義一個陣列
  2. 陣列裡面要有物件,開始編號
  3. 定義資料清單html模板:項目與總價
    • 將内部”取代成’
    • 清除換行空格
    • 將變動資料抽換成取代定義符號
  4. 製作迴圈,跑出item_html模板
  5. 建立一個取代變數,將html模板的取代資訊用2的資料代掉(re_item_html)
    • 取代數字
    • 取代名稱(定義變數item=list[i],呼叫陣列list裡面的物件name)
    • 取代價格
  6. 定義渲染函數showlist
  7. 先執行一次showlist
  8. 製作功能
    建立新增按鈕功能

    • 新增輸入的資料,push,裡面用{}代表一連串動作
    • 用val接收input資料
    • 重新執行一次showlist
  9. 建立刪除按鈕功能:選取刪除按鈕
    • 製作每個刪除按鈕的id:取代用符號{{del}}
    • 將{{del}}取代成自定義編號del_i
    • 刪除按鈕自定義編號
    • 選取刪除用定義編號
  10. 建立移除功能
    • 建立移除函數,鎖定移除値id(id是一個數字)
    • splice(陣列中第幾筆資料,之中的第幾個)
    • 抓取刪除用的id,新增取代用屬性{{item_del}}
    • 將{{item_id}}取代為序數
    • 定義id為序數
    • remove(id),id為陣列中第幾項資料,所以是數字
    • parseInt,將資料轉換為數字
    • 抓取刪除按鈕裡面的屬性(再透過上面replace轉化id値)
  11. 合計欄位
    • 先執行出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

CODEPEN

Leave a Reply

Your email address will not be published. Required fields are marked *