点击按钮对商品价格进行排序操作，使用节点appendChild（）操作

最新推荐文章于 2024-04-18 19:50:41 发布

最新推荐文章于 2024-04-18 19:50:41 发布

阅读量508

点赞数

分类专栏： html css js jq 文章标签： css javascript css3

本文链接：https://blog.csdn.net/Vue1024/article/details/122244073

版权

html css js jq 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

这是一个HTML页面，用于展示一组商品并允许用户通过点击按钮对价格进行升序或降序排序。页面包含多个商品卡片，每个卡片显示商品图片、名称和价格。JavaScript代码实现了排序功能，通过getElementsByTagName获取价格节点，并使用sort函数根据价格进行比较和重新排列。

摘要由CSDN通过智能技术生成

点击按钮对商品价格进行排序操作，使用节点appendChild（）操作


<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>选项卡切换</title>
	</head>
	<style type="text/css">
		.h1{
			width: 900px;
			height: 500px;
			display: flex;
			background: #007ECE;
			    flex-wrap: wrap;
		}
		.h2{
			margin: 10px;
			width: 200px;
			height: 200px;
			background: #E0E0E0;
		}
		img{
			width: 200px;
		}
		span:nth-of-type(1){
			width: 100%;
			text-align: center;
			display: inline-block;
			font-size: 16px;
			margin: 10px 0;
		}
		span:nth-of-type(2){
			width: 100%;
			text-align: center;
			display: inline-block;
			color: red;
			font-size: 20px;
			margin: 10px 0;
		}
	</style>
	<body>
		<div class="h1">
			<div class="h2">
				<img src="20aa.jpeg"/>
				<span>首页1</span>
				<span>180</span>
			</div>
			<div class="h2">
				<img src="20aa.jpeg"/>
				<span>首页2</span>
				<span >420</span>
			</div>
			<div class="h2">
				<img src="20aa.jpeg"/>
				<span>首页3</span>
				<span>720</span>
			</div>
			<div class="h2">
				<img src="20aa.jpeg"/>
				<span>首页4</span>
				<span > 820</span>
			</div>
			<div class="h2">
				<img src="20aa.jpeg"/>
				<span>首页5</span>
				<span>220</span>
			</div>
			<div class="h2">
				<img src="20aa.jpeg"/>
				<span>首页6</span>
				<span>20</span>
			</div>
			<div class="h2">
				<img src="20aa.jpeg"/>
				<span>首页7</span>
				<span>920</span>
			</div>
			<div class="h2">
				<img src="20aa.jpeg"/>
				<span>首页8</span>
				<span>520</span>
			</div>
		</div>
		<button id="desc">升序</button>
		<button id="ites">降序</button>
	</body>
	<script type="text/javascript">
		var list = document.getElementsByClassName("h1")[0]
		console.log(list)
		var desc = document.getElementById("desc")
		var ites = document.getElementById("ites")
		var arr = []
		for(var i =0;i<list.children.length;i++){
			arr.push(list.children[i])
			console.log(list.children[i])
		}
		
		desc.onclick = function(){
			sun(true)
		}
		ites.onclick = function(){
			sun(false)
		}
		function sun(tag){
			arr.sort(function(a,b){
				var tr = a.getElementsByTagName("span")[1].innerText;
				var td = b.getElementsByTagName("span")[1].innerText;
				if(tag){
					return tr - td;
				}else{
					return td - tr;
				}
				
			});
			for(var i=0;i<arr.length;i++){
				list.appendChild(arr[i])
				
			}
		}
		
		
		
	</script>
</html>

在这里插入图片描述