动态选择元素的jquery问题

Question

我正在制作游戏，我试图在任何javascript对象上丢失该健康状态时显示healthLost。这是player

的对象代码的相关部分

function Player(id) {
this.id = id;
this.displayText = "<img src = 'http://3.bp.blogspot.com/-kAhN0HX-MBk/T_5bApfhbJI/AAAAAAAAAuI/lUww8xT9yV8/s1600/smileys_001_01.png'" +
    "class='onTop' id='" + this.id + "' alt='you' border='0' />" +
    "<div id = '" + this.id + "health' class = 'healthLost hide'></div>";}

和monsters（一组对象）

function createMonster(name,startingPoint,level) {
    this.id = "monsters[" + monsterIdPlacholder++ + "]";
    this.displayText = "<img src='http://4.bp.blogspot.com/-wo6VrFt3ER4/UOq47YphNUI/AAAAAAAACCY/e-JnxNYzyWQ/s1600/712324538.png'" +
    "alt='bad guy' border='0' id = '" + this.id + "' />" +
    "<div id = '" + this.id + "health' class = 'healthLost hide'></div>";
}

hide的CSS：

.hide{
    display:none;
}

在我的函数attack()中，我这样写了

function attack( attacker, defender ) {

    //code to calculate healthLost

    var displayHealthDivId = defender.id + "health";  

    console.log( displayHealthDivId  ); 

    console.log( defender.displayText  );   

        $( "#" + displayHealthDivId ).removeClass("hide");
            $( "#" + displayHealthDivId ).html( healthLost );

        });
    }
}

现在上面的jquery适用于我的player对象，但不适用于我的monster对象，console.log会返回以下内容

playerhealth
adventure.js (line 240)
<img src = 'http://3.bp.blogspot.com/-kAhN0HX-MBk/T_5bApfhbJI/AAAAAAAAAuI/lUww8xT9yV8/s1600/smileys_001_01.png'class='onTop' id='player' alt='you' border='0' /><div id = 'playerhealth' class = 'healthLost hide'></div>
adventure.js (line 242)
monsters[0]health
adventure.js (line 240)
<img src='http://4.bp.blogspot.com/-wo6VrFt3ER4/UOq47YphNUI/AAAAAAAACCY/e-JnxNYzyWQ/s1600/712324538.png'alt='bad guy' border='0' id = 'monsters[0]' /><div id = 'monsters[0]health' class = 'healthLost hide'></div>

那为什么它对怪物不起作用？以及如何解决这个问题？

我真正想要的是div出现然后逐渐消失，但我会在以后做到这一点。但是如果你能在你的答案中加入那个很好的话。

link here

抱歉，我无法创建一个小提琴，太多的代码和错误（引用错误，因为我没有放入我的所有代码）不断出现。

- 编辑 -

我找到了一个解决方法但是我仍然不知道上面的代码有什么问题，如果你发现了什么请告诉我，但是上面的链接不会再次证明我的问题。