成品图如下所示:
- <style>
- /* 给 tpl 设置为不可见, 因为我们不需要用到他, 我们只是要克隆他身上的东西, 克隆完就把他删掉. 就跟渣男一样!!!*/
- .tpl{
- display: none;
- }
- </style>
- </head>
- <body>
- <div class="wrapper">
- <div class='tpl'>
- <p></p>
- <span></span>
- <span></span>
- <button>add</button>
- </div>
- <p class="show">
- <span>sum</span>
- <span class="sum">0</span>
- </p>
- </div>
- <script src="../jq/jquery-3.3.1/jquery-3.3.1.js"></script>
引入 jQuery 文件
开始写 JS 代码
- // 模拟后端穿过来的数据
- var shopArr = [
- {
- name : 'james',
- shopName : 'nike',
- price : 110,
- id : '1001'
- },{
- name : 'kobe',
- shopName : 'adidas',
- price : 130,
- id : '1002'
- },{
- name : 'curry',
- shopName : 'Under Armour',
- price : 100,
- id : '1003'
- },{
- name : 'davis',
- shopName : 'lining',
- price : 90,
- id : '1004'
- }
- ];
- shopArr.forEach(function (ele, index){ // 循环数据
- var ocloneDom = $('.tpl').clone().removeClass('tpl'); // 获取类名为 tpl 的元素, 克隆里面所有元素, 然后删除自己的类名
- ocloneDom.data({ // 传入数据
- shopName : ele.shopName,
- price : ele.price,
- id : ele.id
- }).find('p') // 获取克隆后元素里面的 P 标签
- .text(ele.name) // 付上文本 = name(名称)
- .next() // 获取下一个标签
- .text(ele.price); // 附上文本 = price(价格)
- ocloneDom.insertBefore('.show'); // 把获取的元素还有样式放在类名为 show 的标签上方
- })
- $('.wrapper button').click(function(){ // 点击 button
- $('.sum').text( +$('.sum').text() + $(this).parent().data('price') );
- // 不方便用文字表达, 请看图 (点击图)
- })
点击图 ↓
谢谢观看, 如有大佬路过请指出观点!!! 谢谢观看, 如有大佬路过请指出观点!!! 谢谢观看, 如有大佬路过请指出观点!!!
来源: http://www.bubuko.com/infodetail-3068832.html