7.實現加減

kyo4311發表於2015-07-11

將之前的程式碼稍作修改:目前的程式碼是這樣子的了:

;
(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存起來。保證我們想用的物件

相關文章