Question

这对某些人来说可能是一个相当简单的问题，但我无法弄明白。我有按下页面上的特定链接时调用的以下JavaScript函数。

$(document).ready(function () {

    $(".buttonList li").on("click", showType);
});

function showType(event) {
    event.stopPropagation();
    event.preventDefault();
    var $mediaType = $(this).data("type");

    var url = "../data/media.json";
    $.getJSON(url, function (response) {
        var contentTypeHTML = '<ul class="contentList">';
        $.each(response, function (index, media_object) {
            if (media_object.type === $mediaType) {
                contentTypeHTML += '<li>' + media_object.name + '</li>';
            }
        });
        contentTypeHTML += '</ul>';
        $('#data_area').html(contentTypeHTML);

        if ($(".contentList").children().length < 1) {
            $(".contentList").html('<li>NO DATA</li>');
        }
    });

}

正在使用的JSON文件具有以下内容

[
    {"type" : "game","name" : "Skyrim"},
    {"type" : "game","name" : "X-Com: Enemy Within"},
    {"type" : "tvshow","name" : "The Walking Dead"},
    {"type" : "book","name" : "Revelation Space},
    {"type" : "book","name" : "Fatherland"},
    {"type" : "book","name" : "A Wise Man's Fear"}
]

我想要完成的是，当JSON文件被解析时，如果没有创建任何<li>个节点，那么<li>节点的文本为“无数据” “应该创建并附加到<ul>。现在上面的代码工作。但是，当我在$.getJSON回调函数之外移动if语句时，<li>只会出现，当我点击相应的按钮（快速点击）时，它会很快消失。

$.getJSON(url, function (response) {
        var contentTypeHTML = '<ul class="contentList">';
        $.each(response, function (index, media_object) {
            if (media_object.type === $mediaType) {
                contentTypeHTML += '<li>' + media_object.name + '</li>';
            }
        });
        contentTypeHTML += '</ul>';
        $('#data_area').html(contentTypeHTML);
    });
    if ($(".contentList").children().length < 1) {
            $(".contentList").html('<li>NO DATA</li>');
        }

有人可以帮助我理解为什么<li>会一直消失吗？或者if语句应该在$.getJSON回调函数内吗？

Answer 1

如果只添加一个检查响应为空的if / else怎么样？这样，您可以在打印到页面之前确定是否确实需要打印任何内容。

function showType(event) {
    event.stopPropagation();
    event.preventDefault();
    var $mediaType = $(this).data("type");

    var url = "../data/media.json";
    $.getJSON(url, function (response) {  // When results are returned

        var contentTypeHTML = '<ul class="contentList">'; // Start UL

        if (response) { // If response exists

            $.each(response, function (index, media_object) { // Print items
                if (media_object.type === $mediaType) {                
                    contentTypeHTML += '<li>' + media_object.name + '</li>';
                }
            });

        } else { // otherwise

            contentTypeHTML += '<li>NO DATA</li>'; // Just add this
        }

        contentTypeHTML += '</ul>'; // and close it up
        $('#data_area').html(contentTypeHTML); // and put it on the page

    }); // and it should work..hopefully

}

Answer 2

$.getJSON是异步的。这意味着其他代码可以在运行时运行。发生的事情是你的$.getJSON正在开火，然后在它完成之前，正在插入NO DATA元素，然后$.getJSON正在完成并覆盖它，这就是它出现/消失的原因。因此if应位于$.getJSON。

内

Answer 3

在if回调之外的getJSON，它在ajax调用开始之后但在它完成之前就开始了。

此时没有孩子，但是当ajax完成时，你用至少一个UL替换html。只要完成ajax

，你就只能看到它

我会更改它来检查来自ajax调用的响应长度，然后你可以在新的html字符串中包含<li>

 var contentTypeHTML = '<ul class="contentList">';
 if (!response.length) {
     contentTypeHtml += '<li>NO DATA</li>';
 } else {
     $.each(response, function (index, media_object) {
         if (media_object.type === $mediaType) {
             contentTypeHTML += '<li>' + media_object.name + '</li>';
         }
     });
 }
   contentTypeHTML += '</ul>';
   $('#data_area').html(contentTypeHTML);

Answer 4

相当肯定的是你在JSON中输入了引号

{"type" : "book","name" : "Revelation Space}, 在“Space”这个词后面缺少引号。

消失的案例<li> </li>

4 个答案: