如何保持 2 个 Ladda 按钮同步答案

【问题标题】：How to keep 2 Ladda Buttons in-synch如何保持 2 个 Ladda 按钮同步
【发布时间】：2017-08-03 19:03:17
【问题描述】：

我需要在屏幕的顶部和底部放置相同的按钮。我刚刚发现了 Ladda，并且想找到一种方法让这 2 个 Ladda 按钮状态保持同步。我有一些关于如何做到这一点的想法，但大多数都很丑陋。

问：如何让 2 个 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...
}

【问题讨论】：

标签： javascript ladda

【解决方案1】：

这对我来说可以使用 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');

【讨论】：

【解决方案2】：

如果有人有更雄辩的答案，我肯定会将 THEIRS 标记为正确的，但这对我有用...

使用相同的 HTML（如上）
设置 LADDA EVENT（参见 PageController 中的 Initialize 函数）
为每个 DOM ELEMENT 按钮设置调用（参见 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);

【讨论】：