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; width: 500px; height: 500px; background-color:green; padding-left:50px; padding-top: 50px; } .right { float: left; width: 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>