7.實現加減
將之前的程式碼稍作修改:目前的程式碼是這樣子的了:
;
(function($) {
function Quantity(opt) {
this.addBtn = null; //加按鈕
this.cutBtn = null; //減按鈕
this.numBox = null; //數量div
this.msgBox = null; //訊息div
this.minbuy = 1; //最小購買量
this.maxbuy = 99; //最大購買量
this.stock = 99; //存量
this.tuple = 1; //倍數購買
this.init(opt);
}
//初始化
Quantity.prototype.init = function(opt) {
opt = opt || {};
this.addBtn = $(opt.addBtn);
this.cutBtn = $(opt.cutBtn);
this.numBox = $(opt.numBox);
this.msgBox = $(opt.msgBox);
this.evt();
};
//負責繫結事件
Quantity.prototype.evt = function() {
this.addBtn.on('click', function() {
console.log('加');
});
this.cutBtn.on('click', function() {
console.log('減');
});
};
//設定最小購買量
Quantity.prototype.setMinbuy = function() {
};
//設定最大購買量
Quantity.prototype.setMaxbuy = function() {
};
//設定庫存
Quantity.prototype.setStock = function() {
};
//設定倍數購買
Quantity.prototype.setTuple = function() {
};
$.fn.quantity = function(opt) {
return new Quantity(opt);
};
}(jQuery));
程式碼:http://jsfiddle.net/gs_jquery/pjotuaty/
儲存選中數量的記憶體
我們發現,一進來的時候,或是加和減的時候,我們都標記我到底選了多少,因此,我們也給他分配一個分空間。
this.no = 1; //當前選中的數量
真實的最大購買量和最小購買
比如使用者傳了引數: 最大購買量是100, 但是庫存只有10, 那麼很明顯,真實的最大購買量是10,如果使用者又傳了一引數,說這件商一定要按3的倍數買,那麼真實的最大購買量為9。
所在我們還需知道真實的最大購買量和最小購買量,為了方便比較,我們再分配兩個變數:
this.tupleMaxbuy = 99; //倍數最大購買量
this.tupleMinbuy = 1; //倍數最小購買量
之後每次加或是減的時候,我們只要和這兩個變數比較就行了。
實現加減
//負責繫結事件
Quantity.prototype.evt = function() {
var _this = this;
_this.addBtn.on('click', function() {
var no = _this.no + _this.tuple;
//加的時候不能超過最大購買量
if (no <= _this.tupleMaxbuy) {
_this.no = no;
_this.numBox.text(_this.no);
}
});
_this.cutBtn.on('click', function() {
var no = _this.no - _this.tuple;
//減的時候不能小於最小購買量
if (no >= _this.tupleMinbuy) {
_this.no = no;
_this.numBox.text(_this.no);
}
});
};
程式碼:http://jsfiddle.net/gs_jquery/cx43x374/
上面這段程式碼實現了簡單的加和減。
1.每次加和減的都要和this.tuple操作。用於實現倍數購買。
2.每次加和最大購買量對比,每次減和最小購買量對比。
3.因為每個函式內部的都有this,所以在方法內把this存起來。保證我們想用的物件
相關文章
- 【jquery】實現購物車加減jQuery
- 位運算實現加減乘除
- Struts框架 實現複數加減操作框架
- 不用加減乘除做加法(Java實現)Java
- Verilog實現加減乘除運算
- 如何用位運算實現整數的加減法
- 7. Nginx實現高可用配置Nginx
- 直播商城APP,直接實現購物車商品數量加減APP
- 用單連結串列實現多項式加,減,乘,簡單微分
- python實現時間的加減,類似linux的date命令PythonLinux
- golang 時間加減Golang
- java時間加減Java
- 自定義View加減View
- ORACLE時間加減Oracle
- 高精度加減乘
- C語言實現時間的加一天或者減一天C語言
- 【oracle】日期加減計算Oracle
- ACM 分數加減法ACM
- JavaScript加減乘數運算JavaScript
- SQL中時間的加減法SQL
- JS 加減乘除 尤其是減法精度問題JS
- MongoDB 中的【加減乘除】運算MongoDB
- JS加減乘除位移方法封裝JS封裝
- 加減密和數字簽名
- golang time 時間的加減法Golang
- 11.強化加減按鈕
- JSF的加減法與SeamJS
- 簡單的加減乘除(遞迴)遞迴
- 【實驗】【總結】Oracle日期類操作(格式 加減乘 取毫秒)Oracle
- 7.原始碼分析---SOFARPC是如何實現故障剔除的?原始碼RPC
- 大資料的運算加減乘除大資料
- timestamp型別的加減運算型別
- JavaScript 加減危機 —— 為什麼會出現這樣的結果?JavaScript
- 高精度減法(C語言實現)C語言
- Rust能實現碳減排嗎? - theregisterRust
- MySQL SQL實現上下行相加減MySql
- redis加鎖的幾種實現Redis
- mysql查詢中時間、日期加減計算MySql