Question

我创建了一个脚本，使用getJSON()从MySQL数据库中获取来自“父”类型的子类型。为了显示子类型列表，我使用了show()函数，但由于列表尚未加载，它只会弹出，我不喜欢它。如何使用load()函数（或任何其他有助于我的情况的函数）等到列表加载然后使用show()？

function getZvrsti(id){
        $.getJSON('test.php?parent='+id, function(data) {
            var tmpLi;
            $.each(data, function(id, name) {
                tmpLi = $('<li><input type="checkbox" value="'+name['id']+'" id="zvrstId'+name['id']+'" /> <label for="zvrstId"'+name['id']+'">'+name['name']+'</label></li>');
                $(".drugeZvrsti").append(tmpLi);
                tmpLi = "";
            });
        });
    }

这是使用getJSON的函数，这是我使用show()的剪切：

$(".naprejZvrst").click(function(){
            if(!on2){
                parent = $(this).attr("id");
                getZvrsti(parent);
                $(".drugeZvrsti").load(function(){ //my poor example of load()
                    druga.show(400);
                });
                on2 = true;

            }
            else if(on2){
                druga.hide(400);
                on2 = false;
                $(".drugeZvrsti").html(''); 
            }

        })

类drugeZvrsti是<ul>列表，其中显示了列表，var druga是<div>，其中列出了整个<ul>。注意：我找到了load()函数的示例，但没有一个解释如何使用列表，大部分用于图像。

Answer 1

$.getJSON是$.ajax的简写，默认为异步，这意味着代码执行将在您调用后继续。

您要做的是在构建并添加列表项后在回调中显示列表。

// Let's define our local scope variables
var druga = $(".drugeZvrsti"),
    request = false;

function getZvrsti(id) {
    // Save the request to our requests object
    requests[id] = $.getJSON('test.php?parent='+id, function(data) {
        var html = "";
        $.each(data, function(id, name) {
            html += '<li><input type="checkbox" value="'+name['id']+'" id="zvrstId'+name['id']+'" /> <label for="zvrstId"'+name['id']+'">'+name['name']+'</label></li>';
        });
        // Append the list items and then fade in
        druga.append(html).show(400);
        // We no longer have a request going
        request = false;
    });
}

$(".naprejZvrst").click(function(){
    var id = $(this).attr("id");
    // Since we don't want multiple requests, abort any existing one
    if (request) {
        request.abort();
        request = false;
    }
    if (druga.is(":hidden")) {
        getZvrsti(id);
    } else {
        // Stop any animations, fade out and
        // use callback to empty the list when its hidden
        druga.stop().hide(400, function(){
            druga.empty();
        });
    }
});

您还可以注意我在此处所做的其他一些更改，例如：

缓存列表的选择器，因为它已多次使用
将列表构建为纯字符串并将其追加一次。这是因为DOM操作很慢，因此一个好的做法是将其降至最低。
将请求保存到变量中，这样如果有任何正在进行的请求，则可以在隐藏列表时中止该
使用druga检查.is的可见性，而不是使用变量on2

Answer 2

如果在getJSON成功后添加要执行的回调函数，则可以看到它何时完成。虽然我刚刚制作了druga，但您必须修改它以设置一个变量，然后您将在点击事件中进行检查。全部都在docs。

function successFunction(data) {
  druga.show(400);
}

function getZvrsti(id){
        $.getJSON('test.php?parent='+id, function(data) {
            var tmpLi;
            $.each(data, function(id, name) {
                tmpLi = $('<li><input type="checkbox" value="'+name['id']+'" id="zvrstId'+name['id']+'" /> <label for="zvrstId"'+name['id']+'">'+name['name']+'</label></li>');
                $(".drugeZvrsti").append(tmpLi);
                tmpLi = "";
            });
        }, successFunction(i));
    }

Answer 3

你可以使用这样的回调：

function getZvrsti(id, callback){
    $.getJSON('test.php?parent='+id, callback(data));
}

...

 getZvrsti(parent, function(data) {
        var tmpLi;

        $.each(data, function(id, name) {
            tmpLi = $('<li><input type="checkbox" value="'+name['id']+'" id="zvrstId'+name['id']+'" /> <label for="zvrstId"'+name['id']+'">'+name['name']+'</label></li>');
            $(".drugeZvrsti").append(tmpLi);
            tmpLi = "";
        });

       druga.show(400);
 });

未经测试的代码

jQuery - 加载后显示列表

3 个答案: