嗯，这是我的看法：

Question

我正在尝试创建一个网站，该网站使用jQuery更新div以显示使用变量值的消息，这些变量值仅在单击按钮后才会更新。

我通过从firstname对象和lastname对象列表中随机选择来创建一个全名。第一个名称决定了个人的年龄，姓氏决定了出现的文本。但是，有时该文本包含他们的名字和姓氏（例如："Hi, I am " + fullname + ". Nice to meet you."）。出于实际目的，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']);
    }
}

让我们说HTML的一部分看起来像这样：

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

单击该按钮时，会生成随机的名字和姓氏。但是，如果姓氏的['quote']属性包含+ fullname +作为字符串的一部分（如果姓氏是“Diaz”），它将打印“undefined”而不是我在jQuery中创建的连接全名按钮单击事件。我假设这是因为在单击按钮之前创建了对象，并且按钮的脚本不会追溯地让对象的['quote']属性值知道fullname已更新。

我该如何解决这个问题？我需要用户能够继续单击随机化按钮以生成新的名称组合，因此当DOM准备就绪时我无法加载所有内容。

Answer 1

你可以尝试这样做：

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

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

Answer 2

嗯，这是我的看法：

http://jsfiddle.net/SinisterSystems/Z92bd/1/

很抱歉要重写所有内容，但为什么不将所有名字都保存在数组中，以便在DOM之前加载它？... 你总是可以创建一个大对象你宁愿保留ages等等。

<强> HTML：

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

<强>的Javascript

var first = ['sally', 'jacob', 'matt', 'joseph'];
var last = ['johnson', 'haahr', 'hazel', 'garcias'];

$('#makeName').on('click', function() {
    var f = Math.floor(Math.random() * first.length );
    var l = Math.floor(Math.random() * first.length );
    $('#display').text("Hi, my name is " + first[f] + " " + last[l] + ", nice to meet you!");
});

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

2 个答案:

嗯，这是我的看法：

http://jsfiddle.net/SinisterSystems/Z92bd/1/