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 case（简单的东西）和addClass或removeClass onSuccess情况下显示“正在加载...”文本或gif。

实际上看起来像这样：

点击，加载，成功

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图片或加载文字。

onClick（） - ＆gt;正在加载/ onSuccess - ＆gt; addClass或removeClass（JS）

1 个答案: