Javascript onClick（）->；加载/成功时->；addClass或removeClass（JS）

我有一个看似简单但无法解决的问题

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

<!-- This is the span -->

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

要显示“加载…”，可以使用
.ajaxStart（）
；要隐藏，可以使用
.ajaxComplete（）
：

假设您应该在元素中加载gif图像或加载文本
。加载
有什么问题？什么包含参数
customerId、customerValue、tagValue
？问题是我没有显示和隐藏onclick和onsuccess案例加载文本的代码。这些参数是脚本所需的数据。我没有gif或文本。我要把课文放在哪里？我必须把代码ajaxStart和ajaxComplete放在脚本的哪里？
<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>

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