javascript - 使骰子值附加到动态 javascript 制作的 html 代码

Question

所以我正在用 javascript/jquery 做一个小骰子游戏。我从使用 AJAX 获得的 REST API 获得一些用户(在本例中为玩家)，如下所示:

var APICaller = (function () {
    let endpoint = "https://jsonplaceholder.typicode.com/";

    function api_call(method, url, data, callback) {
        $.ajax({
            url: url,
            method: method,
            data: data,
            success: callback
        });
    }

    function get_users(callback) {
        let method = "GET";
        let url = endpoint + "users";
        let data = {};
        api_call(method, url, data, callback);
    }

    return {
        get_users: get_users, 
    };
})();

玩游戏的人可以从用户列表中选择一个玩家，然后按下播放按钮。

按下播放按钮时，骰子应为每个玩家掷出 3 个数字，并在每个玩家的一侧显示所有数字。然后骰子值列表应该在一段时间后改变，只有三个骰子值的总和应该在该列表中，并且用户列表应该按点数顺序排列，总点数最高的在最上面。

这是我试图让这些事情发生的方式:

var Game = (function (){

    //Function for when the dice rolls.
    function roll_dice(){
        var value1 = $(".val1");
        var value2 = $(".val2");
        var value3 = $(".val3");
        var v1 = Math.floor(Math.random() * 6) + 1;
        var v2 = Math.floor(Math.random() * 6) + 1;
        var v3 = Math.floor(Math.random() * 6) + 1;
        var dice_total = v1 + v2 + v3;
        value1.text = v1;
        value2.text = v2;
        value3.text = v3;
    }

    return{
        roll_dice: roll_dice
    };
})();

var EventHandlers = (function () {
    function init(){
        APICaller.get_users(on_get_users_success);

        function on_get_users_success(response) {
            //For each user in the API
            $.each(response, function (i, user) {
                $("#my-list").append('<li class="list-li"><a class="list-a">' + user.name + '</a></li>');
                //Create the divs and p tags 
                $("#dice_value").append('<div class="val_div"> <p class="val1"></p> <p class="val2"></p> <p class="val3"></p></div>');
            });
            //change information
            $("#info-txt").text("Välj en spelare!");
        }
        // On klick on a user make klicked user your own player.
        $("#my-list").on('click', '.list-a', function(){
            var currentPlayer = this.text;

            $("#info-txt").text("Tryck på spela knappen för att börja spelet!");
            $("#currentPlayer-div").animate({height: '300px', opacity: '1'});
            $("#currentPlayer-h3").text(currentPlayer);

        });
        // On klick of the play button
        $("#startGame-button").click(function (){

            $("#dice_value").animate({ opacity: '1'});
            $("#dice_value").ready('.val1', function(){
                text = v1;
            });
            $("#dice_value").ready('.val2', function(){
                text = v2;
            });
            $("#dice_value").ready('.val3', function(){
                text = v3;
            });
            Game.roll_dice();
        });


    }

    return {
        init: init,
    }

})();
$(document).ready(function(){
    EventHandlers.init();
});

我遇到的问题是 3 个骰子值没有显示，我猜它没有绑定(bind)到这个因为它是动态添加的。

 $("#dice_value").append('<div class="val_div"> <p class="val1"></p> <p class="val2"></p> <p class="val3"></p></div>');

这是按下开始按钮时应该发生什么以及我尝试在 p 标签中绑定(bind)骰子值的代码:

// On klick of the play button
        $("#startGame-button").click(function (){

            $("#dice_value").animate({ opacity: '1'});
            $("#dice_value").ready('.val1', function(){
                text = v1;
            });
            $("#dice_value").ready('.val2', function(){
                text = v2;
            });
            $("#dice_value").ready('.val3', function(){
                text = v3;
            });
            Game.roll_dice();
        });

这是html代码:

<div id="top-div">
        <h1 id="title">The game</h1>
        <p id="info-txt"></p>
    </div>
    <div id="currentPlayer-div">
        <h1 id=playerHeader>Din spelare</h1>
        <h3 id="currentPlayer-h3"></h3>
        <button id="startGame-button">Spela</button>
    </div>
    <div id="main_gameDiv">
        <div id="dice_value"></div>
        <ul id="my-list"></ul>
    </div>

我希望这足以说明我需要帮助的方面:)

Answer 1

你打错了，你正试图以纯 javascript 的方式使用 jQuery 对象:

function roll_dice(){
  var value1 = $(".val1");
  var value2 = $(".val2");
  var value3 = $(".val3");
  var v1 = Math.floor(Math.random() * 6) + 1;
  var v2 = Math.floor(Math.random() * 6) + 1;
  var v3 = Math.floor(Math.random() * 6) + 1;
  var dice_total = v1 + v2 + v3;
  
  // value1, value2 & value3 are jQuery objects, not javascript DOM elements
  //value1.text = v1;
  //value2.text = v2;
  //value3.text = v3;
  value1.html(v1);
  value2.html(v2);
  value3.html(v3);
}