Question

我一直在使用下面的代码而不是我期待的那样。当我点击下一个按钮时，它会向上计数，单击后退按钮会倒计时。

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

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();
});

的jsfiddle：

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

Answer 1

这是因为您通过在单击处理程序中调用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() {

<强> Demo

你也可以这样做，将处理程序绑定到类而不是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();
});

<强> Fiddle

即使绑定到不同的按钮，jQuery .on（）click事件似乎也会激活几次

1 个答案: