Javascript 如何保持2个Ladda按钮同步

我需要在屏幕的顶部和底部放置相同的按钮。我刚刚发现了Ladda&我想找到一种方法来保持这两个Ladda按钮状态同步。我对如何做有一些想法，但大多数都很难看

Q:如何保持两个Ladda按钮的运行状态同步？

HTML:
两个按钮具有相同的标记

<button class="btn btn-sm btn-next ladda-button ladda-button-success" data-style="expand-left">
    <span class="ladda-label">Next</span>
    <i class="fa fa-arrow-right"></i>
    <span class="ladda-spinner"></span>
</button>

下一个

JAVASCRIPT事件：

btnNext: function (e) {

    var action = that.settings.actions.next;
    var l = Ladda.create(this);
    l.start(); // <-- How can I "force" a start across multiple buttons?

    // Do other stuff...
}

btnNext:函数（e）{
var action=that.settings.actions.next；
var l=Ladda.create（这个）；
l、 开始（）；//如果有人有更雄辩的答案，我肯定会将他们的答案标记为正确，但这对我来说是有效的


使用相同的HTML（如上所述）
设置LADDA事件（请参阅PageController中的初始化函数）
为每个DOM元素按钮设置一个调用（请参阅PageController中的btnNext函数）

页面控制器：

我将粘贴整个控制器。Ladda似乎不理解jQuery对象。因此，我不得不走这条路

var PageController = (function ($, Ladda) {

            function PageController(options) {
                var that = this,
                    empty = {},
                    dictionary = {
                        elements: { form: null, btnNext: null },
                        selectors: { form: 'form', btnNext: '.btn-next'}
                    };

                var initialize = function (options) {
                    that.settings = $.extend(empty, $.isPlainObject(options) ? options : empty);

                    // Elements
                    dictionary.elements.form = $(dictionary.selectors.form);
                    dictionary.elements.btnNext = $(dictionary.selectors.btnNext, dictionary.elements.form);

                    // Events
                    dictionary.elements.btnNext.on('click', that.on.click.btnNext);

                    Ladda.bind(dictionary.elements.btnNext);
                };

                this.settings = null;
                this.on = {
                    click: {
                        btnNext: function (e) {

                            // Notice I had to point to the actual DOM ELEMENT for each button    
                            var action = that.settings.actions.next;
                            var topLadda = Ladda.create(dictionary.elements.btnNext[0]);
                            var bottomLadda = Ladda.create(dictionary.elements.btnNext[1]);
                            topLadda.start();
                            bottomLadda.start();

                            dictionary.elements.form.attr('action', action);
                            dictionary.elements.form.submit();
                        }
                    }
                };

                initialize(options);
            }

            return PageController;
        })(jQuery, Ladda);

如果有人有一个更雄辩的答案，我肯定会标记他们是正确的，但这对我来说是有效的


使用相同的HTML（如上所述）
设置LADDA事件（请参阅PageController中的初始化函数）
为每个DOM元素按钮设置一个调用（请参阅PageController中的btnNext函数）

页面控制器：

我将粘贴整个控制器。Ladda似乎不理解jQuery对象。因此，我不得不走这条路

var PageController = (function ($, Ladda) {

            function PageController(options) {
                var that = this,
                    empty = {},
                    dictionary = {
                        elements: { form: null, btnNext: null },
                        selectors: { form: 'form', btnNext: '.btn-next'}
                    };

                var initialize = function (options) {
                    that.settings = $.extend(empty, $.isPlainObject(options) ? options : empty);

                    // Elements
                    dictionary.elements.form = $(dictionary.selectors.form);
                    dictionary.elements.btnNext = $(dictionary.selectors.btnNext, dictionary.elements.form);

                    // Events
                    dictionary.elements.btnNext.on('click', that.on.click.btnNext);

                    Ladda.bind(dictionary.elements.btnNext);
                };

                this.settings = null;
                this.on = {
                    click: {
                        btnNext: function (e) {

                            // Notice I had to point to the actual DOM ELEMENT for each button    
                            var action = that.settings.actions.next;
                            var topLadda = Ladda.create(dictionary.elements.btnNext[0]);
                            var bottomLadda = Ladda.create(dictionary.elements.btnNext[1]);
                            topLadda.start();
                            bottomLadda.start();

                            dictionary.elements.form.attr('action', action);
                            dictionary.elements.form.submit();
                        }
                    }
                };

                initialize(options);
            }

            return PageController;
        })(jQuery, Ladda);

我可以使用jQuery选择器同时激活页面所有Ladda按钮上的微调器：

// Create a new instance of ladda for the specified button
var btns = $('.ladda-button').ladda();

// Start loading
btns.ladda('start');

// Stop loading
btns.ladda('stop');

我可以使用jQuery选择器同时激活页面所有Ladda按钮上的微调器：

// Create a new instance of ladda for the specified button
var btns = $('.ladda-button').ladda();

// Start loading
btns.ladda('start');

// Stop loading
btns.ladda('stop');