HTML 对象上的字符串属性不会更新

Question

我有一个设置一些属性的对象构造函数，稍后使用它们连接一个字符串以写入 DOM。我可以看到这在某些情况下有效，但在其他情况下无效。

function Fighter(name, level, attackPts, defencePts, imgSource) {

        // TRUNCATED PROPERTY ASSIGNMENTS AREA:
        this.attackPts = attackPts;
        this.defencePts = defencePts;

        // DOM ELEMENT CONSTRUCTORS:    
        this.img = "style='background: #444 url(" + imgSource + ") no-repeat center'";
        this.char_card_name = "<h3>" + this.name + "</h3>";
        this.char_card_hitdef = "<h4>" + this.attackPts + "/" + this.defencePts + "</h4>";
        this.char_card = "<div class='fighter " +  faction + "' " + "id='" + this.name + "'>" + this.img + this.char_card_name + this.char_card_hitdef + "</div>";

稍后在游戏功能中我修改了这个 "Fighter" 对象的 attack 和 defense 点，并且按预期工作，我的 console.log() 测试验证连接的属性也会更新。 . . .直到最后一个字符串将它们全部拉到一起并显示：

this.char_card = "<div class='fighter " +  faction + "' " + "id='" + this.name + "'>" + this.img + this.char_card_name + this.char_card_hitdef + "</div>";

当我记录这个属性时，那些攻击和防御数字没有变化，即使它们在之前的属性、this.char_card_hitdef

中成功更新

我在这里可以忽略什么？我在整个网络上搜寻范围或变量引用问题，但我的日志语句让我回到了这个关键点。

Answer 1

因为您仍在构造函数中，所以您需要引用不带 this. 的变量，它们是对象的参数 AND 属性 Fighter。

所以改变 this.char_card = "<div class='fighter " + faction + "' " + "id='" + this.name + "'>" + this.img + this.char_card_name + this.char_card_hitdef + "</div>";

到

this.char_card = "<div class='fighter " + faction + "' " + "id='" + name + "'>" + this.img + this.char_card_name + this.char_card_hitdef + "</div>"

以及引用其上方属性的所有其他属性。

您可以阅读有关构造函数的更多信息here

HTML 对象上的字符串属性不会更新

HTML String on Object Property Won't Update

dom

concatenation

object-properties

javascript-objects

HTML 对象上的字符串 属性 不会更新

HTML String on Object Property Won't Update

dom

concatenation

object-properties

javascript-objects

HTML 对象上的字符串属性不会更新