前端相关问题——总价和删除勾选项功能实现不了
0
[已解决问题]
解决于 2017-02-06 14:20
我想实现一个购物车功能，遇到的问题是总价和删除勾选项功能实现不了。请求各位大神帮忙看看
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table th, table td {
border-bottom: 1px solid #aaa;
padding: 8px 15px;
text-align: center;
}
thead > tr {
background: #6a6;
}
tbody > tr:nth-child(even) {
background: #efe;
}
tbody tr:nth-child(2){
line-height: 40px;
}
tfoot td {
text-align: right;
}
/*a {
text-decoration: none;
color: #000;
}*/
p{
float:right;
}
ul{
margin: 0 auto;
}
li{
list-style: none;
float:left;
margin:10px;
}
</style>
</head>
<body>
<h1>练习：jQuery DOM操作和事件处理</h1>
<h3>购物车计算器</h3><br>
<button id="btAdd">添加新商品</button><br><br>
<table id="cart">
<thead>
<tr>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td id="price">3.5</td>
<td>
<input class=" btn1" type="button" id="subtract" value="-"/>
<input class=" input " type="button"id="num" value="1"/>
<input class=" btn2" type="button" id="add" value="+"/>
</td>
<td id="sum">7.0</td>
<td><input name="subBox" class="listCheckBox" type="checkbox"> </td>
</tr>
</tbody>
</table>
<p id="delet">删除勾选项</p>
<br />
<ul>
<li >
<lable>全选</lable>
<input type="checkbox" id="checkAll">
</li>
<li>购物车总金额：<span id="total">3.5</span></li>
</ul>
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script>
var p=$('#price').html();
//点击加按钮
$('#add').click(function(){
var n=$(this).parent().find('#num');
n.val(parseInt(n.val())+1);
total();
});
//点击减号按钮
$('#subtract').click(function(){
var n=$(this).parent().find('#num');
n.val(parseInt(n.val())-1);
if(parseInt(n.val())<1){
n.val(1);
}
total();
getTotal();
});
//小计
function total(){
var s=0;
s+=parseFloat(p*$('#num').val());
$("#sum").html(s);
}
total();
//合计
function getTotal(){
var t=0;
var sum=$('#sum').innerHTML;
t+=sum;
$('#total').html(t);
}
getTotal();
//全选与反选
$("#checkAll").click(function() {
$('input[name="subBox"]').attr("checked",this.checked);
});
var $subBox = $("input[name='subBox']");
$subBox.click(function(){
$("#checkAll").attr("checked",$subBox.length == $("input[name='subBox']:checked").length ? true : false);
});
//删除勾选项
$('#delet').click(function(){
var ch=$subBox.attr('checked');
$('#delet').prev().remove();
});
</script>
</body>
</html>
最佳答案
1
删除的话,貌似是#你用的.;
总价的话,你的函数getTotal();只会加载的时候执行一次;貌似没有关联你前面的点击事件,看的匆匆,如有错误,请多包涵.
奖励园豆：5
首先谢谢你！
删除功能是能用了，但是把整个表格都删除了，我只想删除tbody里面被勾选的行；
总价功能，在小计函数里也调用过总价函数，还是出现NaN
@小红红红: 你用的prev(),表示上一个同胞元素,<p>的上一个同胞元素为<table>,即整个都删除;
总数你改为var sum = parseInt($('#sum').text());或者html()(你加法按钮少一个函数引用)
@半路独行: 谢谢！