这次关于商品价格的排序,运用到了JSON数组传参
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>商品按价格排序</title>
<meta name="Keywords" content="关键词,关键词">
<meta name="description" content="">
<!--css/js-->
<style type="text/css">
*{margin:0px; padding:0px;list-style-type:none;font-family:"微软雅黑"; }
.clearfix:after{
content:'';
display:block;
clear:both;
}
.fl{
float:left;
}
.fr{
float:right;
}
#sort{
width:900px;
margin:50px auto;
border:1px solid #ccc;
padding:30px;
}
#sort ul.product{
border-bottom:1px solid #ccc;
padding:10px 0 30px;
}
#sort ul.product li{
width:25%;
box-sizing: border-box;
padding:10px;
font-size:14px;
}
#sort ul.product li img{
height:192px;
}
#sort ul.product li em{
color:red;
font-size:18px;
font-style:normal;
}
#sort .but{
padding:10px;
background-color: #efefef;
}
#sort .but button{
padding:5px 10px;
}
</style>
</head>
<body>
<div id="sort" class='clearfix'>
<ul class="product clearfix">
<li class='fl'>
<img width='100%' src="./images/xh_img1.jpg" alt="">
<p class='fl'>粉色浪漫系列玫瑰</p>
<span class='fr'>¥ <em>500</em></span>
</li>
<li class='fl'>
<img width='100%' src="./images/xh_img2.jpg" alt="">
<p class='fl'>深红色经典玫瑰</p>
<span class='fr'>¥ <em>100</em></span>
</li>
<li class='fl'>
<img width='100%' src="./images/xh_img3.jpg" alt="">
<p class='fl'>清淡优雅百年百合</p>
<span class='fr'>¥ <em>300</em></span>
</li>
<li class='fl'>
<img width='100%' src="./images/xh_img4.jpg" alt="">
<p class='fl'>紫色冷艳系列</p>
<span class='fr'>¥ <em>700</em></span>
</li>
<li class='fl'>
<img width='100%' src="./images/xh_img5.jpg" alt="">
<p class='fl'>经典红色我的最爱</p>
<span class='fr'>¥ <em>130</em></span>
</li>
<li class='fl'>
<img width='100%' src="./images/xh_img6.jpg" alt="">
<p class='fl'>甜美七分袖荷叶边条纹设</p>
<span class='fr'>¥ <em>215</em></span>
</li>
<li class='fl'>
<img width='100%' src="./images/xh_img7.jpg" alt="">
<p class='fl'>甜美七分袖荷叶边条纹设</p>
<span class='fr'>¥ <em>97</em></span>
</li>
<li class='fl'>
<img width='100%' src="./images/xh_img8.jpg" alt="">
<p class='fl'>甜美七分袖荷叶边条纹设</p>
<span class='fr'>¥ <em>99.5</em></span>
</li>
</ul>
<div class="but fr">
<button>随机</button>
<button>从低到高</button>
<button>从高到低</button>
</div>
</div>
<script>
//商品排序
(function(){
var allBtn = document.querySelectorAll("#sort .but button"),
allList = document.querySelectorAll("#sort .product li"),
allImg = document.querySelectorAll("#sort .product li img"),
allP = document.querySelectorAll("#sort .product li p"),
allEm = document.querySelectorAll("#sort .product li em"),
oUl = document.querySelector("#sort .product");
//先存储所有li的重要数据 -- 图片路径、p标签里面的描述、价格
//[路径，描述，价格]
/*{
src:路径,
dec:描述,
price:价格
}*/
var arrData = [];
for (var i = 0, length = allList.length; i < length; i++) {
arrData[i] = {
src : allImg[i].src,
dec : allP[i].innerText,
price : allEm[i].innerText
};
}
//添加button的点击事件
var arrFn = [
function(){return Math.random()-0.5},
function(a,b){return a.price-b.price},
function(b,a){return a.price-b.price}
];
for (var i = 0, length = allBtn.length; i < length; i++) {
(function(i){
allBtn[i].onclick = function () {
arrData.sort(arrFn[i]);
updataUl(arrData);
};
})(i);
}
//ul内容的变化
function updataUl(data){
var str = "";
for (var i = 0, length = data.length; i < length; i++) {
var nowData = data[i];
str += "<li class='fl'>" +
"<img src='"+nowData.src+"' width='100%'>"+
"<p class='fl'>"+nowData.dec+"</p>"+
"<span class='fr'>¥ <em>"+nowData.price+"</em></span>"+
"</li>";
}
oUl.innerHTML = str;
} 另一种思路
/*
<li class='fl'>
<img width='100%' src="./images/xh_img3.jpg" alt="">
<p class='fl'>清淡优雅百年百合</p>
<span class='fr'>¥ <em>300</em></span>
</li>
*/
/*switch (i){
case 0:
arrData.sort(function(){
return Math.random()-0.5; // [-0.5 , 0.5)
});
updataUl(arrData);
break;
case 1:
arrData.sort(function(a,b){
return a.price-b.price;
});
updataUl(arrData);
break;
case 2:
arrData.sort(function(b,a){
return a.price-b.price;
});
updataUl(arrData);
break;
}*/
})();
</script>
</body>
</html>