这里怎么无法排序,感觉思维不灵活咋办???
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<title>Examples</title>
<style type="text/css">
.text{width:40px;height:20;background:red;}
#wrap{width:1224px;overflow: auto;border:1px solid #000;margin:auto;}
.bg{margin-top:30px;border:1px solid #000;width:0px;margin-left:20px;width:280px;margin-bottom:20px;float:left;}
#wrap .bg .wrap_img{height:220px;margin-bottom:20px;margin-left:20px;}
#wrap .bg .wrap_text{background:#ccc;width:200px;margin-left:20px;padding:20px;margin-bottom:20px;}
.price b{float:left}
.price{float:right;background:pink;padding:5px 10px;line-height:15px;}
</style>
</head>
<body>
<div class="text" onclick="sortPrice()">排序</div>
<div id="wrap">
<div class="bg">
<div class="wrap_img"><img src="1.jpg" /></div>
<div class="wrap_text">
<span class="name">iphone6s</span>
<span class="price"><b>$</b>4455</span>
</div>
</div>
<div class="bg">
<div class="wrap_img"><img src="1.jpg" /></div>
<div class="wrap_text">
<span class="name">iphone6s</span>
<span class="price"><b>$</b>4300</span>
</div>
</div>
<div class="bg">
<div class="wrap_img"><img src="1.jpg" /></div>
<div class="wrap_text">
<span class="name">iphone6s</span>
<span class="price"><b>$</b>5690</span>
</div>
</div>
<div class="bg">
<div class="wrap_img"><img src="1.jpg" /></div>
<div class="wrap_text">
<span class="name">iphone6s</span>
<span class="price"><b>$</b>8800</span>
</div>
</div>
<div class="bg">
<div class="wrap_img"><img src="1.jpg" /></div>
<div class="wrap_text">
<span class="name">iphone6s</span>
<span class="price"><b>$</b>4477</span>
</div>
</div>
<div class="bg">
<div class="wrap_img"><img src="1.jpg" /></div>
<div class="wrap_text">
<span class="name">iphone6s</span>
<span class="price"><b>$</b>2300</span>
</div>
</div>
<div class="bg">
<div class="wrap_img"><img src="1.jpg" /></div>
<div class="wrap_text">
<span class="name">iphone6s</span>
<span class="price"><b>$</b>3400</span>
</div>
</div>
<div class="bg">
<div class="wrap_img"><img src="1.jpg" /></div>
<div class="wrap_text">
<span class="name">iphone6s</span>
<span class="price"><b>$</b>2100</span>
</div>
</div>
<div class="bg">
<div class="wrap_img"><img src="1.jpg" /></div>
<div class="wrap_text">
<span class="name">iphone6s</span>
<span class="price"><b>$</b>3388</span>
</div>
</div>
<div class="bg">
<div class="wrap_img"><img src="1.jpg" /></div>
<div class="wrap_text">
<span class="name">iphone6s</span>
<span class="price"><b>$</b>3355</span>
</div>
</div>
<div class="bg">
<div class="wrap_img"><img src="1.jpg" /></div>
<div class="wrap_text">
<span class="name">iphone6s</span>
<span class="price"><b>$</b>5000</span>
</div>
</div>
<div class="bg">
<div class="wrap_img"><img src="1.jpg" /></div>
<div class="wrap_text">
<span class="name">iphone6s</span>
<span class="price"><b>$</b>1180</span>
</div>
</div>
</div>
<script type="text/javascript">
var make=true;
function sortPrice(){
var div=document.getElementsByClassName("bg");
var divdome=[];
for(var i=0;i<div.length;i++){
divdome.push(div[i]);
}
divdome.sort(function(a,b){
var a=document.querySelector(".wrap_text .price").innerTest.substring(1);
var b=document.querySelector(".wrap_text .price").innerTest.substring(1);
if(make){
return a-b
}else{
return b-a
}
make!=make;
for(var j=0;j<divdome.length;j++){
document.getElementsByClassName("box").appendChild(divdome[j]);
}
});
}
</script>
</body>
</html>
慕粉38845651回答
随时随地看视频慕课网APP
相关分类
JavaScript