Question

我正在开发一个简单的游戏，并在如何将DOM对象绑定到生成它们的JS对象上苦苦挣扎。在Flash时代，这曾经非常容易-对象及其视觉表示是相同的！用JS / HTML做到这一点的最佳方法是什么？这是我要做的事情的精简示例：

<body>

    <div id="pond"></div>

</body>

<script>

    function fish() {
        this.genotype = 'GATTACA';        
        this.phenotype = '<div class="fish" onclick=reveal()></div>';
    }

    shark = new fish();

    $(shark.phenotype).appendTo("#pond");

    function reveal() {
        alert(this.genotype);
    }

</script>

Answer 1

使用.data()将对象与DOM元素关联。

function fish() {
  this.genotype = 'GATTACA';
  this.phenotype = '<div class="fish" onclick="reveal(this)">Click to see genotype</div>';
}

shark = new fish();
$(shark.phenotype).data('fish', shark).appendTo("#pond");
function reveal(element) {
  alert($(element).data('fish').genotype);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="pond"></div>

如何将DOM对象绑定到JS对象

1 个答案: