html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>购物车</title>
<link rel="stylesheet" type="text/css" href="style/shopping.css">
<script type="text/javascript" src="style/jquery-3.3.1.js"></script>
<script>
$(function(){
$.ajax({
type: "GET",
url: "./style/goods.json",
dataType: "json",
success:function(result){
add(result);
}
});
})
function add(result){
$.each(result.data, function(obj){
//console.log(result.data[obj].count);
let str = '<tr>' +
'<td><input type="checkbox" name="select"></td>' +
'<td>' + result.data[obj].name + '</td>' +
'<td>￥<strong>' + result.data[obj].price + '</strong></td>' +
'<td>' +
'<input type="button" value="-" name="sub" disabled="disabled">' +
'<input type="text" name="inputNum" class="inputNum" value="1">' +
'<input type="button" value="+" name="add">' +
'</td>' +
'<td><em name="em">￥' + result.data[obj].count + '</em></td>' +
'<td><a name="delete" href="javascript:;">删除</a></td>' +
'</tr>';
let row = $(str);
//被选中的计算总和
let selectAll = document.getElementById("selectAll");
let $select = $(row).find("input[name='select']");
$("#goods").append(row);
$select.click(function(){
selectAll.checked = true;
countNum = 0;
sum = 0;
part();
if(!$select.checked){
selectAll.checked = false;
}
});
//console.log($select);
});
}
</script>
<script type="text/javascript" src="style/shopping.js"></script>
</head>
<body>
<table id="goods">
<tr>
<th><input type="checkbox" id="selectAll">全选</th>
<th>商品</th>
<th>单价</th>
<th>数量</th>
<th>金额</th>
<th>操作</th>
</tr>
</table>
<br/><br/>
<div class="sum">
已选商品<em name="em">0</em>件，合计<em name="em">0.00</em>元。
</div>
</body>
</html>
js代码
//获取单价，计算金额
function count(){
let strong = document.getElementsByTagName("strong");
let em = document.getElementsByTagName("em");
let inputNum = document.getElementsByName("inputNum");
let money = 0;
for(let i = 0; i < strong.length; i++){
//console.log(strong[i].innerHTML);
money = strong[i].innerHTML * inputNum[i].value;
money = money.toFixed(2);
em[i].innerHTML = "￥" + money;
}
}
//计算总额
function part(){
let strong = document.getElementsByTagName("strong");
let em = document.getElementsByTagName("em");
let inputNum = document.getElementsByName("inputNum");
let select = document.getElementsByName("select");
let countNum = 0;
let sum = 0;
for(let i = 0; i < select.length; i++){
if(select[i].checked){
sum = sum + strong[i].innerHTML * inputNum[i].value;
countNum = countNum + parseInt(inputNum[i].value);
}
}
sum = sum.toFixed(2);
em[em.length - 2].innerHTML = countNum;
em[em.length - 1].innerHTML = sum;
}
//绑定响应函数，并解决兼容性问题
function bind(obj, eventStr, callback){
if(obj.addEventListener){
obj.addEventListener(eventStr, callback, false);
}else{
obj.attachEvent("on" + eventStr, function(){
callback.call(obj);
});
}
}
window.onload = function(){
//给“+”、“-”绑定事件
//事件委派
//let add = document.getElementsByName("add")[0];
let table = document.getElementsByTagName("table")[0];
bind(table, "click", function(event){
// console.log(event);
//获取当前行
let tr = event.target.parentNode.parentNode;
// console.log(tr.childNodes[3].childNodes[0]);
let input = tr.childNodes[3].childNodes[1];
let subNum = tr.childNodes[3].childNodes[0];
// let a = tr.childNodes[5].childNodes[0];
// console.log(name);
if(event.target.name === "add"){
input.value++;
if(input.value > 1){
subNum.disabled = false;
}
count();
part();
}else if(event.target.name === "sub"){
input.value--;
if(input.value == 1){
subNum.disabled = true;
}
count();
part();
}else if(event.target.name === "delete"){
//删除
let name = tr.getElementsByTagName("td")[1].innerHTML;
let flag = confirm("确认删除" + name + "？");
if(flag){
tr.parentNode.removeChild(tr);
}
part();
}
});
//全选操作
//console.log(selectAll.checked);
let em = document.getElementsByTagName("em");
let selectAll = document.getElementById("selectAll");
let select = document.getElementsByName("select");
selectAll.onclick = function(){
for(let i = 0; i < select.length; i++){
select[i].checked = this.checked;
}
if(this.checked){
part();
}else{
em[em.length - 2].innerHTML = 0;
em[em.length - 1].innerHTML = "0.00";
}
};
};
依葫芦画瓢呗。
首先明确下js 是弱类型语言，本质更贴近面向对象哦，里面一切都是对象，包括函数。（建议看看那本核心javascript 不和dom 沾染的）
你代码写的采用了过程 方法和思维 那就是面向过程，采用了面向对象方法和思维就是面向对象哦。
和采用哪种语言关系不大。你可以尝试用c 语言来实现面向对象也是可以的
其次，面向对象的方法
面向对象 代码 形似 得具有 ： 封装 ， 继承 ， 多态 这几个 ，
所以你得先封装，对于js 的封装 那就是弄成一个 js 文件呗，Java里面有类来做封装，脚本文件可称为模块
然后是你 的继承，你看看你代码里面的处理函数本质是处理了几个控件的事件对吧，因此你可以定义对应控件类的函数啊
声明js里面没有类，对象或意义上的类型本质都是函数 比如 Number ,String 啥的都是函数不是类,不要按照Java理解
因此你定义绑定的类，实质是函数然后是checkbox 下拉框等 控件的对应的函数 定义好
js的继承采用 prototype这个字段进行的原生继承，可以从js核心里面了解下这种继承方式
最后是多态，强类型语言中方法都有this,因此必须类型匹配才能使用该类方法
但是弱类型语言可以参考下python中的 self 更贴切，js中也有this，但是这个this没有类型限制，只要两个对象具有相同的属性名
那么就可以调用该方法的，js的多态更加灵活
你先依葫芦画瓢按照结构写，出来的就是面向对象程序，至于程序的组织技巧你后续慢慢领悟吧
建议先学习js的新特征，类class
简单点实现,就是把变量给对象的属性(对象描述),方法给对象的原型添加