Question

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

这是我的尝试

.data()

这是我的function Player() { this.currentLocation = 0; printPlayer(this); } function printPlayer(p) { $("#" + p.currentLocation).html( "<img src = 'http://3.bp.blogspot.com/-kAhN0HX-MBk/T_5bApfhbJI/AAAAAAAAAuI/lUww8xT9yV8/s1600/smileys_001_01.png'" + "class='onTop displayCurrentHealth' alt='you' border='0' />" + "<div class = 'healthLost hide'></div>"); } 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)

如何在函数中动态创建jquery function Player(id) { this.id = id; this.healthid = this.id + "health"; this.displayText = "<img src = 'http://3.bp.blogspot.com/-kAhN0HX-MBk/T_5bApfhbJI/AAAAAAAAAuI/lUww8xT9yV8/s1600/smileys_001_01.png'" + "class='onTop displayCurrentHealth' id='" + this.id + "' alt='you' border='0' />" + "<div id = '" + this.healthid + "' class = 'healthLost hide'></div>"; 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 } );到可以改变位置的图像？

- 更新 -

我在此添加了

data()

也返回$("#" + player.currentLocation).data("foo"); console.log($("#" + player.currentLocation).data());。

- 更新 -

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

Answer 1

不要将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 = $('<img src="">'); // 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 );

Answer 2

正如评论中所指出的，保持数据的关键是保持它附加的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 = $("<img>", {
            "class": "onTop displayCurrentHealth",
            "src": "http://3.bp.blogspot.com/-kAhN0HX-MBk/T_5bApfhbJI/AAAAAAAAAuI/lUww8xT9yV8/s1600/smileys_001_01.png",
            "alt": "you"
        }).data("model", player);

    self.printPlayer = function () {
        $("#" + player.location).append($playerSprite);
    };

    // init
    self.printPlayer();
}

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

2 个答案: