如何给多个按钮设置和获取ID

本文介绍如何使用tmpl模板动态生成带有唯一ID的商品按钮,并实现点击按钮将商品信息加入购物车的功能。通过jQuery操作DOM元素,绑定点击事件,利用本地存储管理购物车数据。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

        我用tmpl模板动态生成商品列表,其中用一列添加按钮模板动态生成很多“加入购物车”按钮,当点击该按钮商品会加入购物车,这就需要给这些按钮添加ID,通过ID找到相应的商品信息加入到购物车,具体内容如下:

//以下是写在html <head>标签中的tmpl模板:
<script  type="text/x-jquery-tmpl"  id="trPemp">
     <tr>
         <td >${classification}</td>
         <td >${name}</td>
         <td >${price}</td>
         <td >${unit}</td>
         <td ><button   id=${id}  >加入购物车</button></td> //生成按钮模板
     </tr>
</script>

 

   

// 给多个按钮添加ID  
var cartList = [
    {classification: "饮料",name: "可口可乐", price: "3", unit: "瓶" ,id:"1"},
    {classification: "饮料",name: "雪碧", price : "3",   unit: "瓶",id:"2"},
    {classification: "水果", name: "苹果", price : "5.5", unit: "斤",id:"3"},
    {classification: "水果", name: "荔枝",  price: "15",   unit: "斤",id:"4"},
    {classification: "生活用品",name: "电池", price : "2", unit: "个",id:"5"},
    {classification: "食品", name: "方便面",  price: "4.5", unit: "袋",id:"6"}
]
//通过tmpl方法在id为tableLis的表格中生成的5个按钮,有了不同的ID
 $("#trPemp").tmpl(cartList).appendTo('#tableList');

 

 

//给这些按钮添加点击事件,当点击某商品的“加入购物车”按钮时通过获取该按钮的ID就可以找到该商品的信息并将其添加到从本地取出的数组中然后再存回到本地,以供购物车页面获取它
function addClickEvent(){
    var data=JSON.parse(localStorage.getItem("data"))||[];
    $("button").click( function(){
    data.push(cartList [ this.id ] );    //this.id  为获取点击按钮的ID       
     localStorage.setItem("data",JSON.stringify(data));
      })
 }
 

 

 

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值