0

我一直在使用下面的代码，但它并没有像我预期的那样运行。当我点击下一个按钮时，它会计数，点击后退按钮会倒计时。

但是然后再次单击下一步会跳过两步。我正在考虑让这个页面更简单，但我的理智只是想知道这里发生了什么。

HTML：

<div id="one" class="tab">
    <h1>One</h1>

    <button id="one-back">Back</button>
    <button id="one-next">Next</button>
</div>
<div id="two" class="tab">
    <h1>Two</h1>

    <button id="two-back">Back</button>
    <button id="two-next">Next</button>
</div>
<div id="three" class="tab">
    <h1>Three</h1>

    <button id="three-back">Back</button>
    <button id="three-next">Next</button>
</div>
<div id="four" class="tab">
    <h1>Four</h1>

    <button id="four-back">Back</button>
    <button id="four-next">Next</button>
</div>

Javascript：

var checkout = {
     current: 0,
     init: function () {
        this.render();
     },
tab: [{
    id: 'one'
}, {
    id: 'two'
}, {
    id: 'three'
}, {
    id: 'four'
}],
render: function () {
    var self = this;
    $('#' + self.tab[self.current].id).show();

    $('#' + self.tab[self.current].id + '-back').on('click', function () {
        $('#' + self.tab[self.current].id).hide();

        if (self.current > 0) {
            self.current = self.current - 1;
        }

        self.render();
    });

    $('#' + self.tab[self.current].id + '-next').on('click', function () {
        $('#' + self.tab[self.current].id).hide();

        if (self.current <= 4) {
            self.current = self.current + 1;
        }

        self.render();
    });
}
};

$(document).ready(function () {
    checkout.init();
});

JSF中：

http://jsfiddle.net/cjheath/HNdD7/1/

4

1 回答 1

2

self.render()那是因为您通过在点击处理程序内部调用来多次出价处理程序。使用 off() 和 on()，因此它会被调用很多次，从而更进一步。

$('#' + self.tab[self.current].id + '-back').off('click').on('click', function() {

和

$('#' + self.tab[self.current].id + '-back').off('click').on('click', function() {

演示

您也可以这样做，将处理程序绑定到类而不是 id 并在另一个函数中分离处理程序注册。

var checkout = {
    current: 0,
    init: function () {
        this.render();
        this.registerHandlers();
    },
    registerHandlers: function () {
        var self = this;
        $('.back').on('click', function () {
            $('#' + self.tab[self.current].id).hide();
            if (self.current > 0) {
                self.current = self.current - 1;
            }

            self.render();
        });

        $('.next').on('click', function () {
            $('#' + self.tab[self.current].id).hide();
            if (self.current <= 4) {
                self.current = self.current + 1;
            }

            self.render();
        });
    },
    tab: [{
        id: 'one'
    }, {
        id: 'two'
    }, {
        id: 'three'
    }, {
        id: 'four'
    }],
    render: function () {
        var self = this;
        $('#' + self.tab[self.current].id).show();
    }
};

$(document).ready(function () {
    checkout.init();
});

小提琴

于 2013-07-08T15:38:00.847 回答