使用 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 在 if 子句中没有任何内容被执行.因此，.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，在这个有问题的if结束时增加这个计数器j++并替换i 与 j 在内部 if, Or
2. 在这个 if 之外，当 i = 0 时使用 .empty() 方法并将内部的 if 减少到只是一个 .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屋！