onClick() -> 加载/onSuccess -> addClass 或 removeClass (JS)

Question

我有一个看起来很简单但我无法解决的问题。

我正在开发一个代码，当用户单击“span”时，如果未选中，则代码添加类，如果选中则删除类。

<!-- This is the span -->

<span class="label label-<?=$tag?><?=$selected?" selected":" hidden-print"?> customer-<?=$i?>" onclick="connect('customer-<?=$i?>', '<?=$customer?>', '<?=$tag?>');"><?=$tag?></span><?

<script>
    function connect(customerId, customerValue, tagValue) {
        var label = $("span.label-" + tagValue + "." + customerId);
        var connectar = !label.hasClass('selected');
        console.log("haciendo " + connectar + " la conexión entre " + customerValue + " y " + tagValue);
        $.getJSON("/api/connect.php?customerId=" + customerValue + "&tagId=" + tagValue + "&connect=" + connectar, function(data) {
            console.log('error: ' + data.error);
            if (data.error == "false") {
                if (data.connected == "true") {
                    label.addClass("selected");
                    label.removeClass("hidden-print");
                }
                if (data.connected == "false") {
                    label.removeClass("selected");
                    label.addClass("hidden-print");
                }
            }
        });
    }
</script>

我想要一个新的 javascript 代码在 onClick 情况下显示“正在加载...”文本或 gif（很简单）和 addClass 或 removeClass onSuccess 情况。

其实是这样的：

点击、加载、成功

http://img841.imageshack.us/img841/478/vgl5.png

我想要的会是这样的：

加载阶段

http://img32.imageshack.us/img32/9230/c4sc.png

最好的问候。

Answer 1

要显示“正在加载...”，您可以使用.ajaxStart()，要隐藏您可以使用.ajaxComplete()：

$(document).ajaxStart(function(){
    $('.loading').show();
}).ajaxComplete(function(){
    $('.loading').hide();
});

假设您的元素 .loading 中应该有加载 gif 图像或加载文本。