JSON 无中生有创建节点方式书城案例

爱被打了一巴掌 2021-07-25 02:19 198阅读 0赞

问题: 将json数据转成js对象  
从对象中拿数据  
如何避免通过搜索(如当前节点.parentNode)获取的节点，同一时刻，页面  
上只能出现一个的情况  
无中生有创建div时，如何设置样式位置  
利用标签的行、块属性设置样式位置

代码示例：

<html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		
    		<style>
    			*{ 
    				margin:0px;
    				padding:0px;
    			}
    			.bookInfo{ 
    				width:25%;
    				display: inline-block;
    				padding: 20px 0px;
    				text-align: center;
    				
    			}
    			
    			.shoppingCar{ 
    				width:88%;
    				margin:0px auto;
    				border:solid 5px skyblue;
    				border-radius: 25px;
    				min-height:25px;
    				min-height: 30px;
    				background-color: orange;
    			}
    			
    		</style>
    	</head>
    	<body>
    		<h1 align="center">书城</h1>
    		<hr />
    		<div class="box">
    			
    			
    		</div>
    		
    		<hr />
    		<div class="shoppingCar">
    			
    		</div>
    		
    		
    		<script>
    			 var data = '{' +
                '"img":["d1.jpg","d2.jpg","d3.jpg","d4.jpg","d5.jpg","d6.jpg","d7.jpg","d8.jpg"],' +
                '"name":[' +
                '"仍然",' +
                '"此刻花开（一本精美绝伦的手工纸雕书）",' +
                '"进击的局座：悄悄话（当当独家附赠精美小册子）",' +
                '"股票短线交易的24堂精品课（第二版）",' +
                '"锦绣旗袍 (全二册)",' +
                '"大暴雪",' +
                '"男孩的冒险书（少儿绘图版，全三册）",' +
                '"古龙作品集套装72册（大陆正版合法授权）"],' +
                '"author":[' +
                '"庆山",' +
                '"徐静",' +
                '"徐静",' +
                '"徐静",' +
                '"徐静",' +
                '"徐静",' +
                '"徐静",' +
                '"徐静"], ' +
                '"newprice":["63.60","33.30","12","15","20","3","8","0.6"],' +
                '"oldprice":["660","330","120","105","200","30","80","6000"]' +
                '}';
                
                //将字符串转换成js对象
                var jsonObj =JSON.parse(data);
    			var box=document.querySelector(".box");
    			var shoppingCar=document.querySelector(".shoppingCar");
               
               for(var i=0;i<jsonObj.img.length;i++)
               { 
         		//动态生成来放图片的div,和图片
               		var div=document.createElement("div");
               		var img=document.createElement("img");
               		
               		img.src='img/'+jsonObj.img[i];
               		
               		div.setAttribute('class','bookInfo');
               		
               		div.appendChild(img);
               	//添加书名
               	var p_bookName=document.createElement("p");
               	p_bookName.innerHTML=jsonObj.name[i];
               	
               
               	div.appendChild(p_bookName);
               	
               	//添加作者
               	var p_author=document.createElement("p");
               	p_author.innerHTML=jsonObj.author[i];
               	div.appendChild(p_author);
               	
               	//添加价格
               	var p_price=document.createElement("p");
               	//添加新价格
               	var n_price=document.createElement("span");
             	n_price.setAttribute("style","margin-right:5px");
               	n_price.innerHTML='$'+jsonObj.newprice[i];
               	
               	//添加旧价格
               	var o_price=document.createElement("del");
               	o_price.innerHTML='$'+jsonObj.oldprice[i];
               	
               	p_price.appendChild(n_price);
               	p_price.appendChild(o_price);
               	
               	div.appendChild(p_price);
               	
               	//添加购物车按钮
               	var btn_add=document.createElement("button");
               	btn_add.innerHTML="添加到购物车";
               	div.appendChild(btn_add);
               	
               	//添加点击事件
               	btn_add.onclick=function(event)
               	{ 
               		var event=event||window.event;
               	//通过搜索获取的节点同一时刻，页面上只能显示一个
               		var parentNode=this.parentNode;
               	//使用克隆可避免通过子节点搜索出来的父节点，在同一时刻页面上只能显示一个
               	
               		var new_node=parentNode.cloneNode(true);
               		new_node.removeChild(new_node.lastChild);
               		shoppingCar.appendChild(new_node);
               		
               	}
               	
               		box.appendChild(div);
               		
               }
              
                	
                	
                	
                	
    		</script>
    	</body>
    </html>