<!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>
添加回答
举报
0/150
提交
取消