zoukankan      html  css  js  c++  java
  • jQuery 复制节点的元素实现加入到购物车功能

    描写叙述:

    用户点击左边div中的商品,相应商品会自己主动加入到右面的div中,类似电子商城中的加入到购物车功能。

    主要用到了jquery中的复制节点功能,基本原理是首先获取点击的元素,然后将对应信息进行克隆,然后加入到右面的div中。

    效果假设:


    show you code:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>jquery test</title>
    <script src="jquery-1.11.1.min.js"></script>
    <style type="text/css">
    	.left
    	{
    		float: left;
    		 500px;
    		height: 500px;
    		background-color:green;
    		padding-left:50px;
    		padding-top: 50px; 
    	}
    	.right
    	{
    		float: left;
    		 500px;
    		height: 500px;
    		background-color:yellow;
    		padding-left:50px;
    		padding-top: 50px; 
    	}
    </style>
    </head>
    
    <body>
    <div class="left">
    	<p>香蕉</p>
    	<p>苹果</p>
    	<p>橘子</p>
    	<p>草莓</p>
    </div>
    <div class="right"></div>
    </body>
    <script type="text/javascript">
    	var $left  = $("div.left p");
    	var $right = $("div.right");
    	$left.click(function(){
    		$(this).clone().appendTo($right);
    	})
    </script>
    </html>
    


  • 相关阅读:
    服务器 container
    oracle误操作表数据--回退(闪回)被提交后的数据
    在线笔记类
    idea maven项目使用过程中遇到的问题
    程序员提升网站
    检索网站
    公开课
    语言学习
    超强/超全面计算网站
    临时邮箱申请
  • 原文地址:https://www.cnblogs.com/blfshiye/p/4342076.html
Copyright © 2011-2022 走看看