使用append和html jquery方法时不会清除图像
用户将搜索电影。 如果用户将再次搜索另一部电影，我希望删除先前的内容，（附加内容之后的任何内容）。 以下是我的代码的样子：
HTML：
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 = '
'; // HTML string /*changeline ++; if (changeline == 8) { $("#Search-Results").prepend('
'); } */ $("#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/
您的逻辑存在问题，以下行是关键：
if (movie.poster_path !== null) {
如果事实certificate，当i = 0时， movie.poster_path == null ，则执行if子句中的任何内容。 因此，永远不会执行.html( s ) ，这是删除先前内容的唯一方法。 您可以通过确认对于spiderman搜索movie.poster_path undefined第一个搜索结果来validation。
您可以使用几种方法来解决此问题：
1.在循环外初始化一个新的计数器，比如说j=0 ，在这个有问题的结尾处增加这个计数器j++ ， if用内部if j替换i ，或者
2.在此之外if在i = 0时使用.empty()方法并将内部if减少到仅仅.prepend(s)
….你得到漂移:-)
请尝试使用此代码。 这应该确保每次返回结果时都会重置搜索结果的HTML。
if(typeof results !== "undefined" && results.length > 0){ $("#Search-Results").html(""); } for(var i=0; i < results.length; i++) { var s = '
'; $("#Search-Results").append(s); }