试图获取动态创建的输入的值,我将如何获得“this”值?

时间:2017-12-04 20:21:33

标签: javascript jquery

我正在尝试从每个特定的动态创建的div输入中获取值,但是我很难获得它们。我想在我的按钮点击上获得“this”特定输入的输入值,但它只是给我第一个div输入值,无论我点击什么按钮。任何帮助将不胜感激!

    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 == "Big 12" || gamesAway == "Big 12"){
                    // console.log(this);
                    var gameId = game.id;
                    var homeTeam = game.home_team;
                    var awayTeam = game.away_team;
                    var pointTotal = game.total_points_bet;
                    var gameTime = game.game_time_hour;
                    var gameDate = game.game_time_date;
                    var gameId = game.id;
                    var network = game.broadcast_network;
                    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)) + ')';
                    var self = $(this);

                $('.wrapper').append('\
                    <div class="main-wrapper '+ gameId +' 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 id="point-total">'+ pointTotal +'</h5>\
                    <p>'+ awayTeam +'</p>\
                    <input class="bet-input-away" data-team-type="'+ awayTeam +'" type="number" pattern="[0-9]*" name="betAmountAway" placeholder="Wager Amount">\
                    <p>'+ homeTeam +'</p>\
                    <input class="bet-input-home" 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: [homeTeam, awayTeam],
                    datasets: [{
                      backgroundColor: [
                        hue,
                        hueTwo,
                      ],
                      data: [200, 500]
                    , borderWidth: 0
                    }]
                  },
                  options: {
                        responsive: true
                    ,   maintainAspectRatio: true
                  }
                });


                // $('.bet-button').click(function(){
                //  if ($(this).hasClass('bet-button')){
                //  $(this).text('Place Bet');
                //  $(this).removeClass('bet-button').addClass('button-toggle');
                //  } else {
                //  $(this).removeClass('button-toggle').addClass('bet-button').text('Click To Place Bet');
                //  }
                // });

                }

            });

        });
    });
    $('.wrapper').on('click', '.bet-button', function() {
    var self = $(this);
    var gameId = self.attr('gameid');
    var awayVal = self.attr('.bet-input-away').val();
    var homeVal = self.attr('.bet-input-home').val();

    console.log(gameId);
    console.log(homeVal);
    console.log(awayVal);
    });
});

1 个答案:

答案 0 :(得分:0)

如果您尝试获取lib的值,则需要在inputs上使用val()。但您使用的是主inputs的{​​{1}}。您使用attr的方式不正确。此外,如果您将游戏的div添加为主attr的父属性,则会更容易。试试这个:

id