Javascript 在jQuery中更新变量后更新包含该变量的HTML字符串

我正在尝试创建一个网站，它使用jQuery更新一个div来显示一条消息，该消息使用变量值，这些变量值只有在单击按钮后才会更新

我通过从firstname对象和lastname对象列表中随机选择来创建全名。名字决定个人的年龄，姓氏决定文本的显示方式。但是，有时该文本包括他们的名字和姓氏（例如：

“嗨，我是”+fullname+”。很高兴认识你。”

）。出于实际目的，jQuery的设置如下：

$(document).ready(function(){
    var firstname_list = [];
    var lastname_list = [];
    var fullname;
    function firstname(name, age) {
        this.name = name;
        this.age = age;
        firstname_list.push(this);
    }
    function lastname(name, quote) {
        this.name = name;
        this.quote = quote;
        lastname_list.push(this);
    }
    var MIKE = new firstname("Mike ", "23");
    var BRAD = new firstname("Brad ", "28");
    var JOEY = new firstname("Joey ", "13");
    var DIAZ = new lastname("Diaz", "Hi, my name is " + fullname + ". Nice to meet you.");
    var SMITH= new lastname("Smith", "Hey. What's up?");
    $('button').click(function() {
        var fetched_firstname = firstname_list[Math.floor(Math.random() * firstname_list.length)];
        var fetched_lastname = lastname_list[Math.floor(Math.random() * lastname_list.length)];
        fullname = (fetched_firstname['name'] + fetched_lastname['name']);
        $('#quote_div').html(fetched_lastname['quote']);
    }
}

<div id="quote_div">THE QUOTE GOES HERE AFTER THE BUTTON IS CLICKED</div>

var DIAZ = new lastname("Diaz", "Hi, my name is %fullname% Nice to meet you.");

 $('#quote_div').html(fetched_lastname['quote'].replace('%fullname%', fullname ));

假设HTML的一部分如下所示：

$(document).ready(function(){
    var firstname_list = [];
    var lastname_list = [];
    var fullname;
    function firstname(name, age) {
        this.name = name;
        this.age = age;
        firstname_list.push(this);
    }
    function lastname(name, quote) {
        this.name = name;
        this.quote = quote;
        lastname_list.push(this);
    }
    var MIKE = new firstname("Mike ", "23");
    var BRAD = new firstname("Brad ", "28");
    var JOEY = new firstname("Joey ", "13");
    var DIAZ = new lastname("Diaz", "Hi, my name is " + fullname + ". Nice to meet you.");
    var SMITH= new lastname("Smith", "Hey. What's up?");
    $('button').click(function() {
        var fetched_firstname = firstname_list[Math.floor(Math.random() * firstname_list.length)];
        var fetched_lastname = lastname_list[Math.floor(Math.random() * lastname_list.length)];
        fullname = (fetched_firstname['name'] + fetched_lastname['name']);
        $('#quote_div').html(fetched_lastname['quote']);
    }
}

<div id="quote_div">THE QUOTE GOES HERE AFTER THE BUTTON IS CLICKED</div>

var DIAZ = new lastname("Diaz", "Hi, my name is %fullname% Nice to meet you.");

 $('#quote_div').html(fetched_lastname['quote'].replace('%fullname%', fullname ));

点击按钮后，报价将显示在此处

单击按钮时，将生成随机的名字和姓氏。但是，如果姓氏的

['quote']

属性包含

+fullname+

作为字符串的一部分（如果姓氏是“Diaz”），它将打印“undefined”，而不是我在jQuery按钮单击事件中创建的串联全名。我假设这是因为对象是在单击按钮之前创建的，并且按钮的脚本不会追溯到对象的

['quote']

属性值知道

全名已更新

我怎样才能解决这个问题？我需要用户能够不断单击随机化按钮以生成新的名称组合，因此当DOM就绪时，我无法加载所有内容。
您可以尝试执行以下操作：

$(document).ready(function(){
    var firstname_list = [];
    var lastname_list = [];
    var fullname;
    function firstname(name, age) {
        this.name = name;
        this.age = age;
        firstname_list.push(this);
    }
    function lastname(name, quote) {
        this.name = name;
        this.quote = quote;
        lastname_list.push(this);
    }
    var MIKE = new firstname("Mike ", "23");
    var BRAD = new firstname("Brad ", "28");
    var JOEY = new firstname("Joey ", "13");
    var DIAZ = new lastname("Diaz", "Hi, my name is " + fullname + ". Nice to meet you.");
    var SMITH= new lastname("Smith", "Hey. What's up?");
    $('button').click(function() {
        var fetched_firstname = firstname_list[Math.floor(Math.random() * firstname_list.length)];
        var fetched_lastname = lastname_list[Math.floor(Math.random() * lastname_list.length)];
        fullname = (fetched_firstname['name'] + fetched_lastname['name']);
        $('#quote_div').html(fetched_lastname['quote']);
    }
}

<div id="quote_div">THE QUOTE GOES HERE AFTER THE BUTTON IS CLICKED</div>

var DIAZ = new lastname("Diaz", "Hi, my name is %fullname% Nice to meet you.");

 $('#quote_div').html(fetched_lastname['quote'].replace('%fullname%', fullname ));

好吧，以下是我的看法：
很抱歉重写了所有内容，但是为什么不将所有名称保留在数组中，以便您可以在
DOM
之前加载它？如果您希望维护
ages
等等，您也可以创建一个大对象

HTML:

<button id="makeName">Make Name</button>
<div id="display">

您希望随机的名字和姓氏填充到
div
？如果这是你的结局，我可以帮你。在
I上面的任何一点上，我的名字都是“+fullname+”。Nic…
您是否曾经更改过未定义变量的全名，因此JS仅将其视为未定义变量。如果
fullname
在
DIAZ
制作之前就已经定义好了，它就在那里了。嘿，真管用！我不知道.replace（）方法。这有助于解决DIAZ在适当定义变量之前尝试引用变量的问题。我不是这样做的，因为我需要引用的实际文本（可能包括也可能不包括全名）与随机化的姓氏相关联，原因超出了这个问题。可以理解：-）我后来回过头来，意识到我可能只回答了问题的表面。我将把它留作参考，但我认为基于您的用例，这对您没有多大帮助。祝你好运！