首页 新闻 搜索 专区 学院

前端相关问题——总价和删除勾选项功能实现不了

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>

小红红红的主页 小红红红 | 菜鸟二级 | 园豆:214
提问于:2017-01-07 17:53
< >
分享
最佳答案
1

 删除的话,貌似是#你用的.;

总价的话,你的函数getTotal();只会加载的时候执行一次;貌似没有关联你前面的点击事件,看的匆匆,如有错误,请多包涵.

 

奖励园豆:5
半路独行 | 小虾三级 |园豆:574 | 2017-01-07 19:52

首先谢谢你!

删除功能是能用了,但是把整个表格都删除了,我只想删除tbody里面被勾选的行;

总价功能,在小计函数里也调用过总价函数,还是出现NaN

 

小红红红 | 园豆:214 (菜鸟二级) | 2017-01-07 20:23

@小红红红: 你用的prev(),表示上一个同胞元素,<p>的上一个同胞元素为<table>,即整个都删除;

总数你改为var sum = parseInt($('#sum').text());或者html()(你加法按钮少一个函数引用)

半路独行 | 园豆:574 (小虾三级) | 2017-01-07 22:15

@半路独行: 谢谢!

小红红红 | 园豆:214 (菜鸟二级) | 2017-01-07 22:24
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册