使用append和html jquery方法时不会清除图像 [英] Images aren't cleared when using append and html jquery methods

问题描述

用户将搜索电影。如果用户将再次搜索另一部电影，我希望删除先前的内容，（附加内容之后的任何内容）。以下是我的代码的样子：

The user will search for a movie. If the user will search again for another movie i want the previous content to be deleted, ( any content after the appended one). Here is how my code looks like:

HTML：

<div id="Search-Results"></div>

jQUERY：

function search() {
    function reset() {

    }

    var movieTitle = $('#search_field').val();
    var str1 = "https://api.themoviedb.org/3/search/movie?include_adult=false&page=1&query=";
    var str2 = "&language=en-US&api_key=xxx";
    var searchResult = str1 + movieTitle + str2;


    //var searchResult = str1.concat(encodeURI(movieTitle)).concat(str2);

    var settings = {
        "async": true,
        "crossDomain": true,
        "url": searchResult,
        "method": "GET",
        "headers": {},
        "data": "{}"
    }

    $.ajax(settings).done(function(response) {
        console.log(response);


        var results = response.results;
        var l = results.length;
        var changeline = 0;

        for (var i = 0; i < l; i++) {
            var movie = results[i];
            var description = movie.overview;
            var title = movie.title;
            var image = 'https://image.tmdb.org/t/p/w500' + movie.poster_path;
            var releaseDate = movie.release_date;

            //Display the description and image
            if (movie.poster_path !== null) {




                var s = '<span id="shell main box"><div class="movie-image" id="shell main"><a href="#"><span class="play"><span class="name"></span></span><img src="https://image.tmdb.org/t/p/w500/' + movie.poster_path + '"/></a></div>'; // HTML string
                /*changeline ++;
                     if (changeline == 8)
                     {
                          $("#Search-Results").prepend('<br>');   
                     }    
                     */
                $("#search_field").val(""); //clear value of the input


                if (i === 0) {

                    $("#Search-Results").html(s);
                } else {


                    $("#Search-Results").append(s);

                }
                /*if(typeof results !== "undefined" && results.length > 0){
                $("#Search-Results").html("");
                }

                for(var i=0; i < results.length; i++) {
                $("#Search-Results").append(s);
                }*/
            }

        }
    });


}   

示例：

当用户搜索头像电影然后搜索教父时，我想要显示新结果并删除旧结果。教父的照片将被添加到div中，并且将删除教父旁边的头像照片。每次用户搜索另一部电影时都会发生这种情况。

When the user searches for avatar movie and then for godfather, i want the new results to be appeared and the old ones removed. The godfather photos will be appended into the div and the avatar photos that are next to godfather will be removed. This will happen every time the user will search for another movie.

问题：

这项技术似乎运行良好，但在某些电影搜索中，照片不会被删除。例如，搜索电影均衡器然后搜索蜘蛛侠并且您将看到均衡器照片未被删除。

This technique seemed to work fine, but with some movie searches the photos aren't deleted. For example, search for the movie "The equalizer" then for "spiderman" And you will see that the equalizer photos aren't deleted.

示例网站：
https://wherehd.herokuapp.com/

推荐答案

您的逻辑存在问题，以下行是关键：

There is a problem with your logic and the following line is key:

if (movie.poster_path !== null) {

如果结果是 movie.poster_path == null 当 i = 0 中没有任何内容子句被执行。因此，永远不会执行 .html（s），这是删除先前内容的唯一方法。您可以通过确认 spiderman 搜索 movie.poster_path 是 undefined 第一个搜索结果。

If it turns out that movie.poster_path == null when i = 0 nothing within the if clause is executed. Therefore, .html( s ) is never executed, which is the only way previous content is removed. You can verify that by confirming that for spiderman search movie.poster_path is undefined for the first search result.

您可以使用以下几种方法来解决此问题：

1.初始化新计数器在循环之外，比如 j = 0 ，在这个有问题的 j ++ > if 并在内部中用 j 替换 i ，或者

2.在之外，如果使用 .empty（）方法 i = 0 并将内部如果减少到 .prepend （s）

There're several approaches you can use to resolve this:
1. Initialize a new counter outside the loop, say j=0, increment this counter j++ at the end of this problematic if and replace i with j in the inner if, Or
2. Outside this if use the .empty() method when i = 0 and reduce the inner if to just a .prepend(s)

....你得到漂移： - ）

....you get the drift :-)

这篇关于使用append和html jquery方法时不会清除图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！