使用append和html jquery方法时不会清除图像

时间:2017-05-18 17:49:01

标签: javascript jquery api

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

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中,并且将删除教父旁边的头像照片。每次用户搜索另一部电影时都会发生这种情况。

问题:

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

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

2 个答案:

答案 0 :(得分:1)

您的逻辑存在问题,以下行是关键:

if (movie.poster_path !== null) {

如果movie.poster_path == null i = 0执行if子句中的任何内容,则结果为.html( s )。因此,永远不会执行spiderman,这是删除先前内容的唯一方法。您可以通过针对第一个搜索结果确认movie.poster_path搜索undefinedj=0来验证该内容。

您可以使用几种方法来解决此问题:
1.在循环外部初始化一个新计数器,例如j++,在此问题if结束时递增此计数器i,并将j替换为if in内在的if,或者 2.在.empty()之外i = 0使用if方法,并将内部.prepend(s)缩减为vendor

....你得到漂移: - )

答案 1 :(得分:0)

请尝试使用此代码。这应该确保每次返回结果时都会重置搜索结果的HTML。

byte[] GetImage(string url)
    {
        var request = (HttpWebRequest)WebRequest.Create(url);
        var response = (HttpWebResponse)request.GetResponse();

        using (Stream dataStream = response.GetResponseStream())
        {
            if (dataStream == null)
                return null;
            using (var sr = new BinaryReader(dataStream))
            {
                byte[] bytes = sr.ReadBytes(100000000);

                return bytes;
            }
        }
    }