关闭广告
晋江论坛网友交流区优声由色
主题:111 [3]
收藏该贴
已收藏
只看楼主
11111
№0 ☆☆☆ 2016-06-27 00:14:38留言☆☆☆  加书签 投诉 不再看TA

<html>
 <head>
  <meta charset="UTF-8">
  <title>购物车
  <X X X X X>
  /*
  参数:btn,表示被点击的 button 按钮
  */
  function cal(btn){
  //btn:元素节点对象,就是用户所点击的按钮
  if(btn.textContent == "+"){
  //加法操作
  //1、先获取 下一个 兄弟元素节点
  var span = btn.nextElementSibling;
  //2、获取 兄弟元素节点的 文本内容
  var value = span.textContent;
  //3、将 文本 转换成 整数 之后 再+1
  value = parseInt(value)+1;
  //4、将 +1 之后的结果 在赋值给 兄弟元素节点
  span.textContent=value;
 
  //5、计算小计 - 获取元素单价
  //先找到 btn 的父元素(td)
  var pNode = btn.parentNode;
  //找到 td 的上一个兄弟元素 td
  var priceTd = pNode.previousElementSibling;
  //获取 td 的文本内容
  var price = parseInt(priceTd.textContent);
 
  //小计:value * price
  var sum = value * price;
  /*console.log("小计:"+sum);*/
 
  //更新小计的值
  //通过 btn 找到其 父元素,上面步骤已经获取(pNode)
  //通过 pNode 找到其 下一个兄弟元素
  var sumTd = pNode.nextElementSibling;
  //更新 其值 为 sum
  sumTd.textContent=sum;
  }else{
  //减法操作
  //通过 btn 得到 数量
  var value = parseInt(btn.previousElementSibling.textContent);
  
  if(value > 1){
  value = value - 1;
 
  btn.previousElementSibling.textContent = value;
  }
  }
 
  //计算 总计
  var tbody = X X X X X.getElementById("tbody");
  var trs = tbody.getElementsByTagName("tr");
  var length = trs.length;
  //声明变量 累加价格
  var total = 0;
  for(var i=0;i  var tr = trs[i]; //获取 trs 中的每一个tr
  //获取 tr 中的最后一个子元素(元素节点)
  var last = tr.lastElementChild;
  total += parseInt(last.textContent);
  }
  //将 total 变量值 , 赋值给 id 为total的textContent
  X X X X X.getElementById("total").textContent = total;
  }
  
 
 <body>
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
iphone64488
  <button onclick="cal(this)">+
  1
  <button onclick="cal(this)">-
  
4488
iphone65588
  <button onclick="cal(this)">+
  1
  <button onclick="cal(this)">-
  
5588
Total:10076

 </body>
</html>
№1 ☆☆☆2016-06-27 00:20:50留言☆☆☆ 
投诉 加书签 引用 不再看TA

又有人把这里当做试验田了。出门21区好吗
№2 ☆☆☆= =2016-06-27 00:26:18留言☆☆☆ 
投诉 加书签 引用 不再看TA

抱歉抱歉 我发现我不会删帖 路过的忽略就好
№3 ☆☆☆啦啦啦啦2016-06-27 15:20:47留言☆☆☆ 
投诉 加书签 引用 不再看TA

回复此贴子

名字:
选择图案:
内容:
(注意:一次最多可提交5000字,且一次最多可提交三张尺寸在1024*1024范围内的图片,超出部分请分次提交!)
图片链接:
(贴图规则)


返回上层 管理 返回本版块首页返回交流区首页返回主页

 

只看楼主