jquery - 使用 jQuery/Bootstrap 进行按钮内确认

Question

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

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

以前有人这样做过吗？与使用弹出窗口或模式或其他东西相反，我实际上想将按钮“批准”更改为“确认”(也许还有颜色......适当的动画等)。

我对 Bootstrap 和 jQuery 还很陌生。

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

非常感谢任何帮助!

Answer 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函数，你还可以得到很好的颜色过渡:)