如何将JavaScript对象连接到函数内的动态创建的html元素 [英] how to connect a javascript object to a dynamically created html element inside a function

问题描述

我正在制作一个游戏，我想要一个玩家对象，我想在一个函数中这样做，但我也想绑定对象显示为播放器的图像。我想要这个，因为我以后会创建怪物，我希望鼠标悬停有一个类似的效果，但是基于对象的属性（即显示他们的健康） ）。我现在的方法不使用 .data（），并使用反向编码，而它现在适用于我现在，我不能扩展我的游戏与这个代码，所以我想要修复它。

i am making a game in which i want to have a "player" object, and i want to do this in a function, but i also want to bind the object to the image displayed as the player. i want this because i later create monsters, and i want the hover to have a similar effect with a hover, but be based on that object's property's (i.e. display their health). my current method does not use .data(), and employ's backwards coding, while it works fine for what i have now, i cant expand my game with this code so i want to fix it up.

这是我的尝试

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（），动态地在一个函数中的图像可以改变位置？

how do i create that as jquery data(), dynamically in a function, onto a image that can have a changing location?

- 更新 - strong>

--update--

我添加了这个

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

其中还返回 null 。

- 更新 -

好，所以我需要某种<一个href =http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller =nofollow> mvc ，有没有办法这样做只是javascript / jquery？如果是，如何？请提供完整的解释和/或链接。

ok so i take it i need some sort of mvc, is there a way to do this in just javascript/jquery? and if yes how? please provide full explanation and/or links.

推荐答案

正如注释中所指出的那样，保持数据的关键是保持DOM节点附加到。

As pointed out in the comments, the key to keeping the data is keeping the DOM node it is attached to.

开始的一种方式可能是这样（从你的代码，尽可能小的变化）：

One way to start could look like this (going from your code, making the smallest possible change):

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元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！