原生js购物车模拟
这里不知道怎么陈述，直接上代码
自己封装了一个外部js函数，其功能如jQuery的$()，但是功能没有人家的强DA，名称是is_selector.js；代码如下
function $(selector){
if(selector.charAt(0) === "#"){
return document.getElementById(selector.slice(1));
}
if(selector.charAt(0) === "."){
if(document.getElementsByClassName === undefined){
var allele = document.getElementsByTagName("*");
for(var i = 0 ; i < allele.length ; i++){
if(allele[i].getAttribute("class") === selector.slice(1)){
return allele[i];
} } } else{
return document.getElementsByClassName(selector.slice(1));
} }
return document.getElementsByTagName(selector);
}
html代码如下：
恩，张远老哥，你以后有钱了可千万别打我啊，emmm
css如下
table,
td {
border-collapse: collapse;
border: 1px red solid;
width: 800px;
margin: 0px auto;
text-align: center;
}
td {
width: 200px;
}
span {
text-align: center;
padding: 5px;
}
.shop {
box-sizing: border-box;
padding: 5px;
margin: 0 auto;
width: 500px;
height: 80px;
display: flex;
justify-content: space-between;
align-content: center;
border-top: 1px solid #eee;
}
.shop .add-cart {
height: 50px !important;
}
js代码
function del_fun() {
var del_ = $(".del");
var len = del_.length;
for (var i = 0; i < len; i++) {
del_[i].onclick = function () {
var tr_ = this.parentNode.parentNode;
tr_.parentNode.removeChild(tr_);
}
}
}
function addnum_fun() {
var btn_ = $(".btn-add");
var len = btn_.length;
for (var i = 0; i < len; i++) {
btn_[i].onclick = function () {
var bor = this.previousSibling.previousSibling;
var sum = (++bor.innerText);
var price_ = this.parentNode.previousSibling.previousSibling;
var all_price = this.parentNode.nextSibling.nextSibling;
all_price.innerText = Number(price_.innerText * sum).toFixed(3);
}
}
}
function subnum_fun() {
var btn_ = $(".btn-sub");
var len = btn_.length;
for (var i = 0; i < len; i++) {
btn_[i].onclick = function () {
var bor = this.nextSibling.nextSibling;
var price_ = this.parentNode.previousSibling.previousSibling;
var all_price = this.parentNode.nextSibling.nextSibling;
console.log(bor);
var sub = --bor.innerText;
if (sub <= 0) {
bor.innerText = 1;
sub = 1;
}
all_price.innerText = Number(price_.innerText * sub).toFixed(3);
}
}
}
function main(){
del_fun();
addnum_fun();
subnum_fun();
}
main();
结果图：
结果，我觉得会被张远老哥打死
