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

how to connect a javascript object to a dynamically created html element inside a function

本文关键字：创建 动态 html 元素 函数 javascript 对象连接      更新时间：2023-09-26

我正在制作一个游戏，在这个游戏中，我想有一个"玩家"object，我想在函数中这样做，但我也想将对象绑定到显示为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)

这是我的旧代码

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 
} );

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

--更新--

我在这个中添加了

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

其还返回CCD_ 7。

--更新--

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

正如评论中所指出的，保留数据的关键是保留它所连接的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();
}
不要将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 );
相关文章：