使用 jQuery/Bootstrap 进行按钮内确认答案

【问题标题】：In-Button Confirmation Using jQuery/Bootstrap使用 jQuery/Bootstrap 进行按钮内确认
【发布时间】：2013-11-27 21:15:08
【问题描述】：

我已经阅读了很多关于使用模态对话框确认提交的内容 - 但我想采用另一种方法。

我想要一个名为“批准”的按钮，当我单击它时，它会滑出另一个显示“确认”的按钮。如果我在 5 秒左右没有点击它，它会返回“批准”，否则，如果我及时点击它，它就会执行一个动作。

以前有人做过吗？与使用弹出框或模态框或其他东西相反，我实际上想将“批准”按钮更改为“确认”（也可能是颜色......适当的动画等）。

我对 Bootstrap 和 jQuery 还很陌生。

我见过的最接近我想要的是 Ladda：http://msurguy.github.io/ladda-bootstrap/

非常感谢任何帮助！

【问题讨论】：

标签： jquery twitter-bootstrap button confirm

【解决方案1】：

您可以使用 jQuery addClass、removeClass 来更改按钮的外观，并使用 .val() 来更改其值

例如，我假设您在默认状态下使用btn-primary，然后在确认状态下将其更改为btn-danger：

$('#btn').click(function(){
    // before check wich action to do
    if ( $(this).hasClass('btn-primary') ){
        // this is the first click
        $(this).removeClass( 'btn-primary' );
        $(this).addClass( 'btn-danger' );
        $(this).val( 'Confirm' );
        var THIS = $(this);
        setTimeout(function(){
            THIS.removeClass( 'btn-danger' );
            THIS.addClass( 'btn-primary' );
            THIS.val( 'Approve' );
        }, 5000);
    }
    if ( $(this).hasClass('btn-danger') ){
        // this is the second/confirmation click
        $(this).removeClass( 'btn-danger' );
        $(this).addClass( 'btn-primary' );
        $(this).val( 'Approve' );

        // do your action
    }
});

如果你使用的是 jQueryUI，你可以使用switchClass 函数，你也可以得到一个漂亮的颜色过渡:)

【讨论】：

太棒了！非常感谢！我会试试看的！
欢迎，很高兴它有帮助:)

【解决方案2】：

@MadScout 这个插件帮你搞定 1 行！

https://github.com/stefanocudini/bootstrap-confirm-button

html:

<a class="btn btn-primary btn-approve-item">Approve</a>

javascript：

$('.btn-approve-item').confirmButton({msg:"Confirm", timeout: 5000}, function(e) {
    console.log('Approved!');
});

【讨论】：