如何在ajax函数上只更新一个div？

Question

现在，我从JSON获取所有数据，然后将这些数据加载到页面上。现在，当我使用ajax成功函数时，它可以正常工作，但它会将数据再次添加到列表的底部。我想我知道为什么会发生这种情况，但我不知道如何解决它。在ajax调用中刷新数据的正确方法是什么？

这将创建带有图表的游戏卡：

function gameCreation(game){
    var gameId = game.id;
    var homeId = game.home_team.id;
    var awayId = game.away_team.id;
    var network = game.broadcast_network || '<b>Channel Not Available.</b>' ;
    var homePoints = game.total_points_bet_on_hometeam;
    var awayPoints = game.total_points_bet_on_awayteam;
    var totalPoints = homePoints + awayPoints;
    var homeColor = '#' + game.home_team['color-primary'];
    var awayColor = '#' + game.away_team['color-primary'];

    var hue = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
    var hueTwo = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';


    $('.wrapper').append('\
    <div id="'+ gameId +'" class="main-wrapper col-lg-6 col-md-6 col-sm-12">\
    <div class="game-cards">\
    <div class="chart-container">\
    <canvas id="'+ homeTeam +'" width="500" height="500"></canvas>\
    </div>\
    <div class="right-info">\
    <h4>' + awayTeam + '<br>' + " @ " + '<br>' + homeTeam +'</h4>\
    <h5 id="time-channel">'+ gameDate +' @ ' + gameTime  + '<br>' + ' On ' + network +'</h5>\
    <div class="total-points-live">\
    <h5>Total Points Bet</h5>\
    <h5 class="total-points" id="point-total">'+ totalPoints +'</h5>\
    <p>'+ awayTeam +'</p>\
    <input class="bet-input-away" data-away-id="'+ awayId +'" data-team-type="'+ awayTeam +'" type="number" pattern="[0-9]*" name="betAmountAway" placeholder="Wager Amount">\
    <p>'+ homeTeam +'</p>\
    <input class="bet-input-home" data-home-id="'+ homeId +'" data-team-type="'+ homeTeam +'" type="number" pattern="[0-9]*" name="betAmountHome" placeholder="Wager Amount">\
    <p class="bet-button" gameid="'+ gameId +'">Click To Place Bet</p>\
    </div>\
    </div>\
    </div>\
        ');

    var ctx = document.getElementById(homeTeam).getContext('2d');

    var myChart = new Chart(ctx, {
      type: 'doughnut',
      data: {
        labels: [homeShort, awayShort],
        datasets: [{
          backgroundColor: [
            homeColor,
            awayColor
          ],
          data: [homePoints, awayPoints]
        , borderWidth: 0
        }]
      },
      options: {
            responsive: true
        ,   maintainAspectRatio: true
      }
    });
}

这会将游戏卡/图表加载到页面上：

    function loadSelectedTeams(selectedValue){

    $('.wrapper').empty()
    getGames().done(function(results){
        $.each(results, function (i, gameData){
            $.each(gameData, function(key, game){
                var gamesHome = game.home_team_conference;
                var gamesAway = game.away_team_conference;

                if(gamesHome == selectedValue || gamesAway == selectedValue){

                    gameCreation(game);

                    reset();

                }

            });

        });
    });

};

然后我希望这会更新游戏，它确实是这样做的，但它也在页面底部添加了一个游戏副本。

function update(){

            var currentSelection = $('#team-select').val();

            getGames().done(function(results){
                $.each(results, function (i, gameData){
                    $.each(gameData, function(key, game){

                            var gamesId = game.id;

                            // clears the current bet totals and replaces them with new ones.
                            if(gameId === gamesId){

                                $('.wrapper', this).empty()
                                gameCreation(game)
                                var totalPointsHome = this.total_points_bet_on_hometeam;
                                var totalPointsAway = this.total_points_bet_on_awayteam;
                                var homePoints = this.total_points_bet_on_hometeam;
                                var awayPoints = this.total_points_bet_on_awayteam;
                                var totalPoints = homePoints + awayPoints;

                                $('#' + gameId + ' .total-points').empty();
                                $('#' + gameId + ' .total-points').append( totalPointsAway + totalPointsHome);


                            }

                    });
                });
            })
        }

        update();

Answer 1

问题来自$('.wrapper').append，基本上每次调用函数时，它都会将其附加到包装器中。试着用wrapper.html代替wrapper.append。这样，它将替换文本而不是附加文本。