jQuery - 加载后显示列表

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 是一个

，其中整个

> 列表是。 注意：我找到了 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 操作很慢，所以一个好的做法是将其保持在最低限度。
• 将请求保存到变量中，以便在列表隐藏时如果有任何正在进行的请求，则可以中止
• 使用 .is 检查 druga 的可见性，而不是使用变量 on2

Answer 2

如果您添加一个在 getJSON 成功时执行的回调函数，您可以看到它何时完成。尽管我刚刚让 druga 显示您必须修改它以设置一个变量，然后您将在点击事件中检查该变量。一切都在文档中。

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);
 });

未经测试的代码