电商网站的购物车加减模块,这里分别用了angularJS 与 jquery 两钟方法实现。
经常写电商的同学们经常会写上面这样的东西,以前一直用jq写的, 最近在学习angularJS, 刚好看到事件这一块, 于是想到了这个。 上面是用angularJS写的一个模块, 用
<body> <div ng-app="myApp" ng-controller="myCtrl"> <span ng-click="count = count + 1">+</span> <span>{{ count }}</span> <span ng-click="count = count - 1">-</span> <br/> <p> 单价为<i ng-model = 'price'>5</i> </p> <p> 总价为 {{count* price}} </p> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.price = 5; $scope.count = 0; }); </script> </body>
上面的方法是不是很简单?分分钟满足你的需求;当然,这也可以用jq来写(请原谅我原声js不行)
$(function() { $("#plus").click(function() { var n = $("#number").val(), num = parseInt(n) + 1; if (num == 0) { alert("cc"); } n.val(num); }); $("#minis").click(function() { var n = $("#number").val(), num = parseInt(n) - 1;
//小于1的时候,默认取值为1 num = num < 1 ? 1 : num; n.val(num); }); });