javascript - 如何将新数字从函数传递给变量？

Question

所以我从一个 JSON 文件中得到这些数字:

var homePoints = game.total_points_bet_on_hometeam;
var awayPoints = game.total_points_bet_on_awayteam;

但稍后在我的代码中，我使用 ajax 调用来提交新号码并检索新的 JSON 号码。我将如何将 homePoints 和 awayPoints 更改为我的 ajax 调用中的新数字？

我查看了给我的答案，但似乎没有一个与我正在尝试做的相符。现在，我需要替换其中数字的变量位于另一个调用 JSON 的函数中。

         $.each(gameData, function(key, game){
            var homePoints = game.total_points_bet_on_hometeam;
            var awayPoints = game.total_points_bet_on_awayteam;
            var totalPoints = homePoints + awayPoints;

            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
                  }
                });
               };

$.ajax({
              url: "---------/dbdata/bet/new/" + userId + "/"+ gameId +"/"+ id +"/"+ value +"",
              type: "get",
            success: function(response) {
                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){
                                        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;

                                        console.log(homePoints)

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



                                    }

                            });
                        });
                    })
                }

                update();

Answer 1

@gforce301 can you explain how to make a reusable function to do this?

当然，我会试一试。

看起来您正在使用某种“图表”库，并且在某个地方显示了一些信息。所以让我们首先创建一个变量来在全局范围内保存我们的“图表”和一个函数创建/更新它们。像这样:

var charts = {};

function updateChart(game) {
    var chart = charts[game.id],
        homePoints = game.total_points_bet_on_hometeam,
        awayPoints = game.total_points_bet_on_awayteam,
        totalPoints = homePoints + awayPoints;

    // do we have a chart for this game yet? no make one
    if(!chart]) {
        charts[game.id] = new Chart(ctx, {
            type: 'doughnut',

            data: {
                labels: [homeShort, awayShort],
                datasets: [{
                    backgroundColor: [homeColor, awayColor],
                    data: [homePoints, awayPoints],
                    borderWidth: 0
                }]
            },

            options: {
                responsive: true,
                maintainAspectRatio: true
            }
        });
    }
    // yes update the chart
    else {
        // Here is code to update an existing chart which 
        // I know nothing about your charts so you have to write this part
        chart.setSomeProperty('property', value); // <- or however it's done
    }
}

我们还需要一个函数来更新我看到的一些 jQuery 优点所做的一些标记。所以让我们这样做:

function updateMarkup(game) {
    var totalPointsHome = game.total_points_bet_on_hometeam,
        totalPointsAway = game.total_points_bet_on_awayteam,
        homePoints = game.total_points_bet_on_hometeam,
        awayPoints = game.total_points_bet_on_awayteam,
        totalPoints = homePoints + awayPoints;

    $('#' + game.id + ' .total-points').empty();
    $('#' + game.id + ' .total-points').append( totalPointsAway + totalPointsHome);
}

现在我们有了它，在我们拥有初始 gameData 的开始处，我们只是循环它并调用我们的更新函数。像这样:

$.each(gameData, function(key, game) {
    updateChart(game);
    updateMarkup(game);
}

现在稍后我们进行一些 ajax 调用并获取一些新的游戏数据。我们只是循环数据并再次调用我们的更新函数。像这样:

$.ajax({
    url: "---------/dbdata/bet/new/" + userId + "/"+ gameId +"/"+ id +"/"+ value +"",
    type: "get",

    success: function(response) {
        var gameData = response.data // or wherever the data is in the response
        $.each(gameData, function(key, game) {
            updateChart(game);
            updateMarkup(game);
        });
    }
});