javascript - .empty() 方法改变返回结果的数量

Question

我对编码非常熟悉，并且在技术问题上需要帮助。我正在使用 Ajax 提交一个应该返回 10 个结果的查询。它会这样做，但是当我输入空方法以清除保存结果的 div 以提交由事件处理程序触发的新查询时，它只显示一个结果而不是十个。

我省略了 $(#returns).empty() 以确保我的代码正常工作并返回 10 个结果。

            url: queryURL,
            method: "GET"
        }).then(function(response){
            console.log(response.data);

            var imageResults = response.data;

            for (var i=0; i<imageResults.length; i++){
                var gifDiv = $("<div id='returns'>");
                var rating = imageResults[i].rating;
                var ratingP = $("<p>").text("Rating: " + rating);
                // console.log(ratingP);
                var giph = $("<img>");
                var stillGiph = imageResults[i].images.fixed_width_small_still.url;
                giph.attr("src", stillGiph);  //Does the attribute need two arguments? Can I pass anim/still giphs in if statements separately? Does if statements for movement need to be a separate function?

                //empty returns div prior to appending new information
                $("#returns").empty();
                gifDiv.append(giph, ratingP);
                $("#returns").prepend(gifDiv);
            };
        });

Answer 1

您需要$("#returns").empty();在运行for循环之前调用。就目前而言，您的代码大致类似于

fetch 10 details then
    for detail in details
        empty returns div
        add an item

你需要的是

fetch 10 details then
    empty returns div
    for detail in details
        add an item