求JS，购物车商品金额根据商品数量增减

qq_43351105 2020-04-27 09:40:25



<ul class="mui-table-view" id="lists">

					<li class="mui-table-view-cell rs-orderby-li">

						<div class="rs-ordertop rs-over">

							<div class="mui-pull-left mui-checkbox" style="margin-top: 30px;">

								<input type="checkbox" class="rs-checkbox">

							</div>

							<div class="mui-pull-left" style="margin-left: 10px;">

								<img src="https://dcloud.io/hellomui/images/cbd.jpg" alt="" width="80" height="80">

							</div>

							<div class="rs-txt">

								<p class="rs-txt-title">商品标题商品标题商品标题商品标题</p>

								<div class="rs-over">

									<span class="mui-pull-left">商品价格</span>

									<div class="mui-numbox mui-pull-right" data-numbox-min="1">

										<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>

										<input class="mui-input-numbox" type="number" value="商品数量">

										<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>

									</div>

								</div>

							</div>

							<span class="mui-icon mui-icon-trash" style="padding-top: 35px;"></span>

						</div>

						<div class="rs-bottom">

							dasdadada大苏打的盛大的

						</div>

					</li>

</ul>

<span id="nums">商品总金额</sapn>

说明：
1、li标签是后台循环出来的一个li一个商品信息
2、页面引用了mui.min.js，（商品数量的加减效果是mui.min.js实现的）

求：
1、页面加载完后计算出所有商品及其对应数量的金额总和
2、商品数量的增减，商品总金额要增减对应商品的金额。
3、我在减号按钮上写了个 onclick，当商品数量是2的时候，按减号按钮，商品数量变成1，但却不执行 onclick函数了，这是mui.min.js的问题吗，（大于2的数字按减号都会执行），
如果1，2能解决这个问题，3可忽略。

...全文

759 8 打赏收藏转发到动态举报

写回复

用AI写文章

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

qq_43351105 2020-04-29

打赏
举报

我需要根据我给的HTML 写出的JS 代码问答地址：https://ask.csdn.net/questions/1065877

jio可 2020-04-28

打赏
举报

[quote=引用 4 楼 WeiflR10 的回复:] array.splice() 具体看api

jio可 2020-04-28

打赏
举报


<table>
  <thead>
    <th>id</th>
    <th>name</th>
    <th>price</th>
    <th>num</th>
    <th>sum</th>
  </thead>
  <tbody id="tb">

  </tbody>
</table>
<script>
  let cart = [{
      id: '001',
      name: '商品1',
      price: 200,
      num: 1
    },
    {
      id: '002',
      name: '商品2',
      price: 200,
      num: 2
    },
    {
      id: '003',
      name: '商品3',
      price: 200,
      num: 3
    },
  ]
  var el = document.getElementById('tb')
  // html
  function price() {
    var sum = 0
    el.innerHTML = ''
    cart.forEach((item, index) => {
      el.innerHTML += `<tr>
        <td>${item.id}</td>
        <td>${item.name}</td>
        <td>${item.price}</td>
        <td>
          <button onclick="minus(${index})">-</button>
          ${item.num}
          <button onclick="plus(${index})">+</button>
        </td>
        <td>${item.num*item.price}</td>
      </tr>`
      sum += item.num * item.price
    })
    el.innerHTML += `<tr><td colspan="5">合计：${sum}</td></tr>`
  }
  // -
  function minus(index) {
    if (cart[index].num >= 1) {
      cart[index].num--
    } else {
      if (window.confirm('确定删除商品？')) {
        cart.splice(index, 1)
      }
    }
    price()
  }
  // +
  function plus(index) {
    cart[index].num++
    price()
  }
  price()
</script>

qq_43351105 2020-04-28