Question

代码第一次正常工作，但第二次将结果附加到前一个。在第二次单击该按钮时，我想删除以前的结果。我怎么能这样做？

html代码

<input type='textbox' id='city' value='paris'></input>
        <button id='btnCity' '>Get</button>

        <ul class='container'>
            <script id="weather-template" type="text/x-handlebarstemplate">
                <li  class='weather-list'>
                    <p>{{name}}</p>
                    <p>Latitude : {{coord.lat}}</p>
                    <p>Longitude : {{coord.lon}}</p>
                    <p>Wind Degree : {{wind.deg}}</p>
                    <p>Wind Speed : {{wind.speed}}</p>
                </li>
            </script>

        </ul>

js code

(function(){
                var txtCity = $('#city');
                var liWeather = $('.weather-list');

                $('#btnCity').on('click',function(){

                    var url = 'http://api.openweathermap.org/data/2.5/weather?q='+ txtCity.val();
                    var twitter = new Twitter({
                        url : url,
                        template : $('#weather-template').html(),
                        container : $('ul.container')
                    });
                    twitter.fetch();

                })
            }());

function Twitter(config ){
        //console.log(config);
        this.url = config.url,
        this.template = config.template,
        this.container = config.container 

    }

    Twitter.prototype.attachTemplate = function() {
        //console.log(this.template);
        //console.log(this.weather);

        var template = Handlebars.compile(this.template);
        var html = template(this.weather);
        this.container.append(html);
    };

    Twitter.prototype.fetch = function() {
        console.log(this.url);
        var self = this;
        $.getJSON(this.url,function(data){
            self.weather = {
                name : data.name,
                coord : {
                            lat : data.coord.lat,
                            lon : data.coord.lon
                },
                wind : {
                            deg :data.wind.deg,
                            speed : data.wind.speed
                }
            }
            self.attachTemplate();
            // self.display();

        });
    };

Answer 1

在追加

之前用.html("")清除它

this.container.html("");
this.container.append(html);

此外，在帖子中只发布相关项目。

Answer 2

$('.weather-list').html("");

我不必使用已存储的this.container值，而是动态查询它并使用它。

如何删除已使用把手填充的页面上的先前结果

2 个答案: