Jquery / json 動態產生購物車清單

My tip

如果看不到codepen playground，請重新整理頁面

See the Pen 你的 CodePen 標題 by Retsnom on CodePen.

---

index.html

<div id="buylist">
  <h1>MyBuylist 購物清單</h1>
  <div class="buy_item control_panel">
    <label>產品名</label>
    <input id="input_name" placeholder="名稱..."/>
    <label>價錢</label>
    <input id="input_price" placeholder="234..."/><span class="addbtn">+新增</span>
  </div>
  <div id="items_list"></div>
</div>

style.sass

$color_black: #444
$color_yellow: #FFC954
$color_red: #FF3D4A
$color_white: #f3f3f3
*
  // border: solid 1px
  position: relative
  font-family:  'Roboto Condensed', sans-serif , "微軟正黑體"
html,body
  width: 100%
  height: 100%
  margin: 0
  display: flex
  justify-content: center
  align-items: center
  border:1px solid black
  background-color: $color_yellow
#buylist
  display: inline-block
  padding: 20px
  border: solid 4px $color_black
  background-color: $color_white
  box-shadow: 0px 0px 30px rgba(0,0,0,0.2)
h1
  padding: 10px 20px
  margin-top: -20px
  margin-left: -20px
  margin-right: -20px
  border-bottom: solid 4px $color_black
  background-color: $color_red
  color: $color_white
  font-weight: 600
  
#items_list
  margin-top: 10px
  padding: 5px
.buy_item
  padding: 5px
  list-style: none
  border: solid 3px $color_black
  margin-top: 10px
  font-weight: 900
  & input
    width: 100px
    border: solid 3px
    padding: 2px
  & .price
      display: inline-block
      position: absolute
      padding-left: 8px
      padding-right: 8px
      right: 50px
      background-color: $color_yellow
      &::before
        content: "$ "
  & .del_btn
    display: inline-block
    position: absolute
    padding: 0px 6px
    right: 10px
    cursor: pointer
    &:hover
      background-color: $color_red
      color: white
    
  & .addbtn
    cursor: pointer
    margin-left: 10px
    padding: 5px
    border: solid 3px $color_black
    
    &:hover
      background-color: $color_red
      color: white
.control_panel
  padding: 20px
  
.total
  background-color: $color_red
  color: $color_white
  & .price
    background-color: transparent

script.js

//新增一個商品清單的物件
let shoplist={};
shoplist.name="MyBuylist 購物清單";
shoplist.time="2025/03/14"
//商品清單的清單裡面是個陣列，塞商品物件們
shoplist.list=[
  {name: "雙層舒眠床墊",price: 17000},
  {name: "apple watch 10",price: 19000},
  {name: "MacBook Air",price: 41900},
  {name: "Iphone 16 Pro",price: 40000},
  {name: "Insta360 GO 3S",price: 14999}
];
//定義元素用的html模板，{{名稱}}代表要套入的地方
var item_html="<li id={{id}} class='buy_item'>{{num}}.{{item}}<div class='price'>{{price}}</div><div id={{del_id}} data-delid={{del_item_id}} class='del_btn'>X</div></li>";
var total_html="<li class='buy_item total'>總價<div class='price'>{{price}}</div></li>";
//刪除並重新產生清單中所有項目
function showlist(){
  $("#items_list").html("");
  let total_price=0;
  //把每個項目做出來
  for(let i=0;i<shoplist.list.length;i++){
    let item=shoplist.list[i];
    let item_id="buyitem_"+i;
    let del_item_id="del_buyitem_"+i;
    //動態統計總價(每一項跑時加上去)
    total_price+=parseInt(item.price);
    //取代模板位置成資料replace(要取代的,取代成...)
    let current_item_html=
        item_html.replace("{{num}}",i+1)
                 .replace("{{item}}",item.name)
                 .replace("{{del_id}}",del_item_id)
                 .replace("{{price}}",item.price)
                 .replace("{{del_item_id}}",i)
    ;
    //加入元素後才能夠用jquery操作
    $("#items_list").append(current_item_html);
    $("#"+del_item_id).click(
    function(){
      remove_item(parseInt($(this).attr("data-delid")));
    });
  }
  //新增總價那一欄
  let current_total_html=
      total_html.replace("{{price}}",total_price);
  $("#items_list").append(current_total_html);
}
//先顯示一次，因為前面只定義好function 還沒有執行
showlist();
// 新增資料流程: 動態push一筆資料->呼叫showlist重新渲染清單
$(".addbtn").click(
  function(){
    //使用val()存取輸入的值，val("..") 有給參數是設定
    shoplist.list.push(
      {
        name:$("#input_name").val(),
        price:$("#input_price").val()
      }
    );
    $("#input_name").val("");
    $("#input_price").val("");
    showlist();
  }
);
//刪除項目 陣列.splice(位置,長度) 
//刪除資料->重新根據資料渲染清單
function remove_item(id){
  shoplist.list.splice(id,1);
  showlist();
}

---

Please note

這個內容是來自吳哲宇老師的動畫互動網頁程式入門 (HTML/CSS/JS) 課程