从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（JS）
前言
补齐了，要了老命了。
一、购物车和鲜花价格排序的案例
1.购物车
效果图：
我的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
#box {
margin: 50px auto;
width: 997px;
height: 455px;
user-select: none;
}
#box .head {
width: 1000px;
height: 50px;
}
#box .head li {
float: left;
width: 248px;
height: 48px;
border: 1px solid #fc87d8;
border-right: 1px solid #fc87d8;
background: #fc87d8;
text-align: center;
line-height: 50px;
color: white;
font-weight: bold;
font-size: 14px;
}
#content {
width: 998px;
border-left: 1px solid #fc87d8;
border-right: 1px solid #fc87d8;
overflow: hidden;
}
#content ul {
width: 1000px;
border-bottom: 1px solid #fc87d8;
overflow: hidden;
}
#content ul li {
float: left;
width: 248.75px;
height: 100px;
border-right: 1px solid #fc87d8;
text-align: center;
line-height: 100px;
position: relative;
}
#content ul li img {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
width: 90px;
}
#content ul li.num span {
display: inline-block;
width: 30px;
height: 30px;
border: 1px solid #ddd;
line-height: 30px;
margin: 35px auto;
font-weight: bold;
}
#content ul li.num span.jia,
#content ul li.num span.jian {
background: #ddd;
cursor: pointer;
}
#content ul li.num span.shuliang {
width: 70px;
}
#foot {
/* margin: 10px auto; */
width: 1000px;
height: 50px;
background: #fc87d8;
}
#foot p {
width: 250px;
float: right;
text-align: center;
line-height: 50px;
color: white;
}
#foot p span {
color: deeppink;
font-size: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<div id="box">
<ul class='head'>
<li>商品</li>
<li>单价</li>
<li>数量</li>
<li>小计</li>
</ul>
<div id="content">
<ul>
<li class='img'>
<img src="images/1.webp">
</li>
<li class='danjia'>8</li>
<li class='num'>
<span class='jian'>-</span>
<span class='shuliang'>0</span>
<span class='jia'>+</span>
</li>
<li class='xiaoji'>0</li>
</ul>
<ul>
<li class='img'>
<img src="images/2.webp">
</li>
<li class='danjia'>10</li>
<li class='num'>
<span class='jian'>-</span>
<span class='shuliang'>0</span>
<span class='jia'>+</span>
</li>
<li class='xiaoji'>0</li>
</ul>
<ul>
<li class='img'>
<img src="images/3.webp">
</li>
<li class='danjia'>12.5</li>
<li class='num'>
<span class='jian'>-</span>
<span class='shuliang'>0</span>
<span class='jia'>+</span>
</li>
<li class='xiaoji'>0</li>
</ul>
<ul>
<li class='img'>
<img src="images/4.webp">
</li>
<li class='danjia'>23</li>
<li class='num'>
<span class='jian'>-</span>
<span class='shuliang'>0</span>
<span class='jia'>+</span>
</li>
<li class='xiaoji'>0</li>
</ul>
</div>
<div id="foot">
<p>合计费用￥ <span class='zongjia'>0</span></p>
<p>已选中商品: <span class='zongshu'>0</span> 个</p>
</div>
</div>
<script>
var jia = document.getElementsByClassName("jia"),
jian = document.getElementsByClassName("jian"),
shuliang = document.getElementsByClassName("shuliang"),
danjia = document.getElementsByClassName("danjia"),
xiaoji = document.getElementsByClassName("xiaoji"),
zongjia = document.getElementsByClassName("zongjia")[0],
zongshu = document.getElementsByClassName("zongshu")[0];
for (var i = 0; i < shuliang.length; i++) {
jia[i].i = i
jia[i].onclick = function () {
shuliang[this.i].innerHTML++
xiaoji[this.i].innerHTML = Number(danjia[this.i].innerHTML) * Number(shuliang[this.i].innerHTML)
zongshu.innerHTML = Number(shuliang[0].innerHTML) + Number(shuliang[1].innerHTML) + Number(shuliang[2].innerHTML) + Number(shuliang[3].innerHTML)
zongjia.innerHTML = Number(xiaoji[0].innerHTML) + Number(xiaoji[1].innerHTML) + Number(xiaoji[2].innerHTML) + Number(xiaoji[3].innerHTML)
}
jian[i].i = i
jian[i].onclick = function () {
if (shuliang[this.i].innerHTML != 0) {
shuliang[this.i].innerHTML--
xiaoji[this.i].innerHTML = Number(danjia[this.i].innerHTML) * Number(shuliang[this.i].innerHTML)
zongshu.innerHTML = Number(shuliang[0].innerHTML) + Number(shuliang[1].innerHTML) + Number(shuliang[2].innerHTML) + Number(shuliang[3].innerHTML)
zongjia.innerHTML = Number(xiaoji[0].innerHTML) + Number(xiaoji[1].innerHTML) + Number(xiaoji[2].innerHTML) + Number(xiaoji[3].innerHTML)
}
}
}
</script>
</body>
</html>
教学代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
#box {
margin: 50px auto;
width: 997px;
height: 455px;
user-select: none;
}
#box .head {
width: 1000px;
height: 50px;
}
#box .head li {
float: left;
width: 248px;
height: 48px;
border: 1px solid #fc87d8;
border-right: 1px solid #fc87d8;
background: #fc87d8;
text-align: center;
line-height: 50px;
color: white;
font-weight: bold;
font-size: 14px;
}
#content {
width: 998px;
border-left: 1px solid #fc87d8;
border-right: 1px solid #fc87d8;
overflow: hidden;
}
#content ul {
width: 1000px;
border-bottom: 1px solid #fc87d8;
overflow: hidden;
}
#content ul li {
float: left;
width: 248.75px;
height: 100px;
border-right: 1px solid #fc87d8;
text-align: center;
line-height: 100px;
position: relative;
}
#content ul li img {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
width: 90px;
}
#content ul li.num span {
display: inline-block;
width: 30px;
height: 30px;
border: 1px solid #ddd;
line-height: 30px;
margin: 35px auto;
font-weight: bold;
}
#content ul li.num span.jia,
#content ul li.num span.jian {
background: #ddd;
cursor: pointer;
}
#content ul li.num span.shuliang {
width: 70px;
}
#foot {
/* margin: 10px auto; */
width: 1000px;
height: 50px;
background: #fc87d8;
}
#foot p {
width: 250px;
float: right;
text-align: center;
line-height: 50px;
color: white;
}
#foot p span {
color: deeppink;
font-size: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<div id="box">
<ul class='head'>
<li>商品</li>
<li>单价</li>
<li>数量</li>
<li>小计</li>
</ul>
<div id="content">
<ul>
<li class='img'>
<img src="images/1.webp">
</li>
<li class='danjia'>8</li>
<li class='num'>
<span class='jian'>-</span>
<span class='shuliang'>0</span>
<span class='jia'>+</span>
</li>
<li class='xiaoji'>0</li>
</ul>
<ul>
<li class='img'>
<img src="images/2.webp">
</li>
<li class='danjia'>10</li>
<li class='num'>
<span class='jian'>-</span>
<span class='shuliang'>0</span>
<span class='jia'>+</span>
</li>
<li class='xiaoji'>0</li>
</ul>
<ul>
<li class='img'>
<img src="images/3.webp">
</li>
<li class='danjia'>12.5</li>
<li class='num'>
<span class='jian'>-</span>
<span class='shuliang'>0</span>
<span class='jia'>+</span>
</li>
<li class='xiaoji'>0</li>
</ul>
<ul>
<li class='img'>
<img src="images/4.webp">
</li>
<li class='danjia'>23</li>
<li class='num'>
<span class='jian'>-</span>
<span class='shuliang'>0</span>
<span class='jia'>+</span>
</li>
<li class='xiaoji'>0</li>
</ul>
</div>
<div id="foot">
<p>合计费用￥ <span class='zongjia'>0</span></p>
<p>已选中商品: <span class='zongshu'>0</span> 个</p>
</div>
</div>
<script>
var jia = document.getElementsByClassName('jia'),
jian = document.getElementsByClassName('jian'),
shuliang = document.getElementsByClassName('shuliang'),
xiaoji = document.getElementsByClassName('xiaoji'),
zongshu = document.getElementsByClassName('zongshu')[0],
zongjia = document.getElementsByClassName('zongjia')[0],
danjia = document.getElementsByClassName('danjia');
for (var i = 0; i < shuliang.length; i++) {
// console.log( i )
/*
jian[0].i = 0
jian[1].i = 1
jian[2].i = 2
jian[3].i = 3
*/
jia[i].i = i;
jian[i].i = i;
jia[i].onclick = function () {
var num = 0;
var tot = 0;
shuliang[this.i].innerHTML++
//shuliang * danjia = xiaoji
xiaoji[this.i].innerHTML = shuliang[this.i].innerHTML * danjia[this.i].innerHTML;
for (var i = 0; i < danjia.length; i++) {
// console.log( i )
/*
shuliang[0].innerHTML
shuliang[1].innerHTML
shuliang[2].innerHTML
shuliang[3].innerHTML
*/
// num += parseFloat( shuliang[i].innerHTML );
num += shuliang[i].innerHTML * 1;
tot += xiaoji[i].innerHTML / 1
}
// console.log( typeof shuliang[0].innerHTML )
zongshu.innerHTML = num
zongjia.innerHTML = tot
}
jian[i].onclick = function () {
var num = 0;
var tot = 0;
shuliang[this.i].innerHTML--
//shuliang * danjia = xiaoji
if (shuliang[this.i].innerHTML < 0) {
shuliang[this.i].innerHTML = 0
}
xiaoji[this.i].innerHTML = shuliang[this.i].innerHTML * danjia[this.i].innerHTML;
for (var i = 0; i < danjia.length; i++) {
num += shuliang[i].innerHTML * 1;
tot += xiaoji[i].innerHTML / 1
}
zongshu.innerHTML = num
zongjia.innerHTML = tot
}
}
</script>
</body>
</html>
优化后代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
#box {
margin: 50px auto;
width: 997px;
height: 455px;
user-select: none;
}
#box .head {
width: 1000px;
height: 50px;
}
#box .head li {
float: left;
width: 248px;
height: 48px;
border: 1px solid #fc87d8;
border-right: 1px solid #fc87d8;
background: #fc87d8;
text-align: center;
line-height: 50px;
color: white;
font-weight: bold;
font-size: 14px;
}
#content {
width: 998px;
border-left: 1px solid #fc87d8;
border-right: 1px solid #fc87d8;
overflow: hidden;
}
#content ul {
width: 1000px;
border-bottom: 1px solid #fc87d8;
overflow: hidden;
}
#content ul li {
float: left;
width: 248.75px;
height: 100px;
border-right: 1px solid #fc87d8;
text-align: center;
line-height: 100px;
position: relative;
}
#content ul li img {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
width: 90px;
}
#content ul li.num span {
display: inline-block;
width: 30px;
height: 30px;
border: 1px solid #ddd;
line-height: 30px;
margin: 35px auto;
font-weight: bold;
}
#content ul li.num span.jia, #content ul li.num span.jian {
background: #ddd;
cursor: pointer;
}
#content ul li.num span.shuliang {
width: 70px;
}
#foot {
/* margin: 10px auto; */
width: 1000px;
height: 50px;
background: #fc87d8;
}
#foot p {
width: 250px;
float: right;
text-align: center;
line-height: 50px;
color: white;
}
#foot p span {
color: deeppink;
font-size: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<div id="box">
<ul class='head'>
<li>商品</li>
<li>单价</li>
<li>数量</li>
<li style='border-right:1px solid #c36;'>小计</li>
</ul>
<div id="content">
<ul>
<li class='img'>
<img src="images/1.webp">
</li>
<li class='danjia'>8</li>
<li class='num'>
<span class='jian'>-</span>
<span class='shuliang'>0</span>
<span class='jia'>+</span>
</li>
<li class='xiaoji'>0</li>
</ul>
<ul>
<li class='img'>
<img src="images/2.webp">
</li>
<li class='danjia'>10</li>
<li class='num'>
<span class='jian'>-</span>
<span class='shuliang'>0</span>
<span class='jia'>+</span>
</li>
<li class='xiaoji'>0</li>
</ul>
<ul>
<li class='img'>
<img src="images/3.webp">
</li>
<li class='danjia'>12.5</li>
<li class='num'>
<span class='jian'>-</span>
<span class='shuliang'>0</span>
<span class='jia'>+</span>
</li>
<li class='xiaoji'>0</li>
</ul>
<ul>
<li class='img'>
<img src="images/4.webp">
</li>
<li class='danjia'>23</li>
<li class='num'>
<span class='jian'>-</span>
<span class='shuliang'>0</span>
<span class='jia'>+</span>
</li>
<li class='xiaoji'>0</li>
</ul>
</div>
<div id="foot">
<p>合计费用￥ <span class='zongjia'>0</span></p>
<p>已选中商品: <span class='zongshu'>0</span> 个</p>
</div>
</div>
<script>
var jia = document.getElementsByClassName('jia'),
jian =document.getElementsByClassName('jian'),
shuliang = document.getElementsByClassName('shuliang'),
xiaoji = document.getElementsByClassName('xiaoji'),
zongshu = document.getElementsByClassName('zongshu')[0],
zongjia = document.getElementsByClassName('zongjia')[0],
danjia = document.getElementsByClassName('danjia');
for( var i = 0; i < shuliang.length; i++){
//绑定自定义属性;
jia[i].i = i;
jian[i].i = i;
//右边+
jia[i].onclick = function(){
//绑定自定义属性，做为参数传值;
var idx = this.i;
shuliang[idx].innerHTML++
Change(idx)
}
//左边-
jian[i].onclick = function(){
var idx = this.i;
if( --shuliang[idx].innerHTML < 0 ){shuliang[idx].innerHTML=0}
Change(idx)
}
}
function Change(idx){
//定义初始值num , tot保存总量;
var num = 0;
var tot = 0;
//xiaoji的计算;
xiaoji[idx].innerHTML=shuliang[idx].innerHTML*danjia[idx].innerHTML;
for( var i = 0 ; i< danjia.length ; i++){
num += shuliang[i].innerHTML*1;
tot += xiaoji[i].innerHTML/1
}
zongshu.innerHTML = num
zongjia.innerHTML = tot
}
</script>
</body>
</html>
2.鲜花价格排序
效果图：
我的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
font-family: Microsoft YaHei, serif;
}
li {
list-style: none;
}
#box {
width: 1000px;
margin: 50px auto;
}
#top {
width: 100%;
background: #f8f8f8;
border: 1px solid #ddd;
height: 40px;
}
#top li {
position: relative;
float: left;
width: 80px;
height: 40px;
text-align: center;
line-height: 40px;
font-size: 14px;
cursor: pointer;
}
#top li span.red {
color: red;
}
#top li div {
display: none;
position: absolute;
z-index: 99;
top: -1px;
left: 0;
width: 100px;
height: 80px;
font-size: 14px;
border: 1px solid #ddd;
background: #ffffff;
}
#content {
width: 100%;
margin-top: 10px;
}
#content li {
position: relative;
float: left;
margin: 5px 14px;
width: 200px;
height: 230px;
padding: 10px;
border: 1px solid #eee;
}
#content li img {
width: 200px;
height: 200px;
}
#content li p {
font-size: 14px;
}
#content li div {
position: absolute;
bottom: 0;
right: 0;
width: 50px;
height: 50px;
background: url("images/price.png");
text-align: center;
line-height: 50px;
color: #fff318;
font-size: 14px;
font-weight: bold;
}
</style>
</head>
<body>
<div id="box">
<ul id="top">
<li>流行</li>
<li>热销</li>
<li>上新</li>
<li class="price">
<span>价格</span>
<div class="hide">
<p>从高到底</p>
<p>从低到高</p>
</div>
</li>
</ul>
<ul id="content">
<li>
<img src="images/xh_img1.jpg" alt="">
<p>甜美七分袖荷叶边条纹设</p>
<div>
￥<span>500</span>
</div>
</li>
<li>
<img src="images/xh_img2.jpg" alt="">
<p>甜美七分袖荷叶边条纹设</p>
<div>
￥<span>100</span>
</div>
</li>
<li>
<img src="images/xh_img3.jpg" alt="">
<p>甜美七分袖荷叶边条纹设</p>
<div>
￥<span>300</span>
</div>
</li>
<li>
<img src="images/xh_img4.jpg" alt="">
<p>甜美七分袖荷叶边条纹设</p>
<div>
￥<span>700</span>
</div>
</li>
<li>
<img src="images/xh_img5.jpg" alt="">
<p>甜美七分袖荷叶边条纹设</p>
<div>
￥<span>130</span>
</div>
</li>
<li>
<img src="images/xh_img6.jpg" alt="">
<p>甜美七分袖荷叶边条纹设</p>
<div>
￥<span>215</span>
</div>
</li>
<li>
<img src="images/xh_img7.jpg" alt="">
<p>甜美七分袖荷叶边条纹设</p>
<div>
￥<span>97</span>
</div>
</li>
<li>
<img src="images/xh_img8.jpg" alt="">
<p>甜美七分袖荷叶边条纹设</p>
<div>
￥<span>99.5</span>
</div>
</li>
</ul>
</div>
<script>
var price = document.getElementsByClassName('price')[0],
priceSpan = price.getElementsByTagName('span')[0],
hide = document.getElementsByClassName('hide')[0], //oHiden = hide
p = hide.getElementsByTagName('p'), //btns = p
content = document.getElementById('content'), //content = con
lis = content.getElementsByTagName('li'),
spans = content.getElementsByTagName(('span')), //spanS = span
arr = [];
// 之前做的点击事件，后来发现教学讲的是鼠标事件
price.onmouseenter = function () {
hide.style.display = 'block';
}
price.onmouseleave = function () {
hide.style.display = 'none';
}
// 之后将价格放入数组中,我之前是与spans绑定，教学里是与li相绑定，是为了可以直接控制li的显示
// 我之前的:也可以
// for (var i = 0; i < spans.length; i++) {
// // *1让arr里面是数字类型
// arr[i][0] = spans[i].innerHTML * 1
// arr[i][1] = lis[i].innerHTML
// }
// 讲解的:构建双层数组
for (var i = 0; i < lis.length; i++) {
arr.push([])
arr[i][0] = spans[i].innerHTML * 1
arr[i][1] = lis[i].innerHTML
}
// 点击事件：从高到低和从低到高
for (var i = 0; i < p.length; i++) {
p[i].i = i
p[i].onclick = function () {
// 刚开始这里的i我也搞不明白，不过觉得这里直接取i时会报错，取this.i不会报错，可能是因为方法内i未定义吧。
hide.style.display = 'none'
// priceSpan.innerHTML = p[this.i].innerHTML//或者
priceSpan.innerHTML = this.innerHTML
priceSpan.className = 'red'
// 判断是哪个选项：从高到低还是从低到高
priceSort(this.i)
// 商品信息置空
content.innerHTML = ''
// 显示商品
console.log(arr[1][1])
for (var i = 0; i < arr.length; i++) {
content.innerHTML += '<li>' + arr[i][1] + '</li>'
}
}
}
// 在外面封装一个函数
function priceSort(idx) {
arr.sort(function (a, b) {
// 这里的a,b表示的是二维数组里面嵌套的小数组，所以这里想要取值的话，需要使用下标
// 判断升序还是降序，是0的话从高到低，降序:b[0]-a[0]；是1的话，从低到高，升序：a[0]-b[0]；
return idx ? a[0] - b[0] : b[0] - a[0]
})
console.log(arr)
}
</script>
</body>
</html>
教学代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin:0;padding:0;font-family: Microsoft YaHei,serif;}
li{list-style: none;}
#box{
width:1000px;
margin:50px auto;
}
#top{
width:100%;
background: #f8f8f8;
border:1px solid #ddd;
height: 40px;
}
#top li{
position: relative;
float: left;
width:80px;
height: 40px;
text-align: center;
line-height:40px;
font-size:14px;
cursor: pointer;
}
#top li span.red{
color:red;
}
#top li div{
display: none;
position: absolute;
z-index: 99;
top:-1px;
left:0;
width: 100px;
height: 80px;
font-size:14px;
border:1px solid #ddd;
background: #ffffff;
}
#content{
width:100%;
margin-top:10px;
}
#content li{
position: relative;
float: left;
margin:5px 14px;
width:200px;
height: 230px;
padding:10px;
border:1px solid #eee;
}
#content li img{
width: 200px;
height: 200px;
}
#content li p{
font-size:14px;
}
#content li div{
position: absolute;
bottom:0;
right:0;
width: 50px;
height: 50px;
background: url("images/price.png");
text-align: center;
line-height: 50px;
color: #fff318;
font-size:14px;
font-weight: bold;
}
</style>
</head>
<body>
<div id="box">
<ul id="top">
<li>流行</li>
<li>热销</li>
<li>上新</li>
<li class="price">
<span>价格</span>
<div class="hide">
<p>从高到底</p>
<p>从低到高</p>
</div>
</li>
</ul>
<ul id="content">
<li>
<img src="images/xh_img1.jpg" alt="">
<p>甜美七分袖荷叶边条纹设</p>
<div>
￥<span>500</span>
</div>
</li>
<li>
<img src="images/xh_img2.jpg" alt="">
<p>甜美七分袖荷叶边条纹设</p>
<div>
￥<span>100</span>
</div>
</li>
<li>
<img src="images/xh_img3.jpg" alt="">
<p>甜美七分袖荷叶边条纹设</p>
<div>
￥<span>300</span>
</div>
</li>
<li>
<img src="images/xh_img4.jpg" alt="">
<p>甜美七分袖荷叶边条纹设</p>
<div>
￥<span>700</span>
</div>
</li>
<li>
<img src="images/xh_img5.jpg" alt="">
<p>甜美七分袖荷叶边条纹设</p>
<div>
￥<span>130</span>
</div>
</li>
<li>
<img src="images/xh_img6.jpg" alt="">
<p>甜美七分袖荷叶边条纹设</p>
<div>
￥<span>215</span>
</div>
</li>
<li>
<img src="images/xh_img7.jpg" alt="">
<p>甜美七分袖荷叶边条纹设</p>
<div>
￥<span>97</span>
</div>
</li>
<li>
<img src="images/xh_img8.jpg" alt="">
<p>甜美七分袖荷叶边条纹设</p>
<div>
￥<span>99.5</span>
</div>
</li>
</ul>
</div>
<script>
var price = document.getElementsByClassName('price')[0],
PriceSpan = price.getElementsByTagName('span')[0],
oHiden = document.getElementsByClassName('hide')[0],
btns = oHiden.getElementsByTagName('p'),
con = document.getElementById('content'),
lis = con.getElementsByTagName('li'),
spanS = con.getElementsByTagName('span'),
arr = [];
price.onmouseenter = function(){
oHiden.style.display = 'block';
}
price.onmouseleave = function(){
oHiden.style.display = 'none';
}
/*
[
[ 价格 , 对应整个li样式 ],
[ 97 , 对应整个li样式 ],
[ 97 , 对应整个li样式 ],
[ 97 , 对应整个li样式 ],
....
]
*/
// class {}
for( var i = 0; i < lis.length; i++){
arr.push([])
// console.log(arr[i])
// console.log( i )
arr[i][0] = spanS[i].innerHTML*1;
arr[i][1] = lis[i].innerHTML;
}
// console.log( arr )
for( var i = 0; i < btns.length;i++){
btns[i].i = i; // 0 1
btns[i].onclick = function(){
oHiden.style.display = 'none'
PriceSpan.innerHTML = this.innerHTML;
PriceSpan.className = 'red'
// console.log( this.i )
PriceSort( this.i )
}
// console.log( i )
}
//升 ， 降 ？
function PriceSort( idx ){
// console.log( idx )
arr.sort(function( a , b ){
// console.log( a )
// 0 : 降
// 1 : 升
return idx ? a[0] - b[0] : b[0] - a[0]
})
console.log( arr )
con.innerHTML = ''
for( var i = 0 ; i <arr.length ; i++){
con.innerHTML += "<li>"+ arr[i][1]+"</li>";
}
}
</script>
</body>
</html>
1218
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
