如何将javascript对象连接到函数内动态创建的html元素

我正在制作一个游戏，其中我想要一个“玩家” object ，我想在一个函数中执行此操作，但我还想将对象绑定到显示为player的图像。 我想要这个，因为我后来创建了怪物，我希望hover在hover时具有类似的效果，但是基于该object的属性（即显示它们的健康状况）。 我当前的方法不使用.data() ，并使用向后编码，虽然它现在的工作正常，我不能用这个代码扩展我的游戏，所以我想修复它。

这是我的尝试

 function Player() { this.currentLocation = 0; printPlayer(this); } function printPlayer(p) { $("#" + p.currentLocation).html( "" + "
"); } var player = new Player(); console.log($("#" + player.currentLocation).data("inFight", "false")); console.log($("#" + player.currentLocation).data("inFight")); console.log($("#" + player.currentLocation).data(!"inFight")); 

这是我的console.log()结果

 Object[] adventure.js (line 62) null adventure.js (line 63) null adventure.js (line 64) 

这是我的旧代码

 function Player(id) { this.id = id; this.healthid = this.id + "health"; this.displayText = "" + "
"; this.inFight = false; this.currentLocation = 0; this.xp = 0; this.level = 1; } Object.defineProperty(player,"health",{ set: function() { return 100 + ( this.level * 150 ); }, get: function() { return 100 + ( this.level * 150 ); }, enumerable: true } ); player.currentHealth = player.health; Object.defineProperty(player,"strength",{ set: function() { return ( this.level * 5 ); }, get: function() { return ( this.level * 5 ); }, enumerable: true } ); Object.defineProperty(player,"hitRating",{ set: function() { return 3 + ( this.level ); }, get: function() { return 3 + ( this.level ); }, enumerable: true } ); 

我如何在函数中动态地将jquery data()创建到可以改变位置的图像上 ？

–update–

我加入了这个

 $("#" + player.currentLocation).data("foo"); console.log($("#" + player.currentLocation).data()); 

它也返回null 。

–update–

好吧所以我接受它我需要某种mvc ，有没有办法在javascript / jquery中做到这一点？ 如果是的话怎么样？ 请提供完整的说明和/或链接。

Answer 1

正如评论中所指出的，保持数据的关键是保持它所附着的DOM节点。

一种开始的方式可能看起来像这样（从你的代码开始，做出最小的改变）：

 function Player() { var self = this; self.location = 0; self.level = 1; self.xp = 0; self.inFight = false; // add methods that calculate XP and so on } function Game() { var self = this, player = new Player(), $playerSprite = $("", { "class": "onTop displayCurrentHealth", "src": "http://sofzh.miximages.com/javascript/smileys_001_01.png", "alt": "you" }).data("model", player); self.printPlayer = function () { $("#" + player.location).append($playerSprite); }; // init self.printPlayer(); } 

Answer 2

不要将data()附加到任何DOM节点。 你应该有一个知道它的DOM节点的对象，以及一个Model 。 你的怪物也可以访问Model这样他们就知道玩家的健康状况。

您很少需要使用data()来传递信息。 这将使您的应用更新变得更加困难，尤其是如果您想稍后调整DOM。

保持您的DOM和业务逻辑尽可能分离，以保持灵活性。

 var Model = Function( id ) { this.health = 100; this.id = id; }; // This object is showing examples of different ways an object can know about the image var Monster = Function( hero_model, monster_model ) { this.sprite = $('#element').tmpl({}); // using jQuery template this.sprite = $(''); // if you are making image based on model data this.sprite = $('#img-' + hero_model.id ); // if you wanted to look on DOM then, based on data passed in this.sprite = document.getElementById( 'img-' + hero_model.id ); // to get element without jquery }; var Player = Function( model ) { this.model = model; } // Passing 1 as ID, but you can have a number that increments var hero_model = new Model( 1 ); hero_model.damage = 50; var monster_model = new Model( 1 ); monster_model.damage = 10; var hero = new Player( hero_model ); var monster = new Monster( hero_model, monster_model );