javascript - 使用 JQuery 更新 HTML 中的变量

Question

我是一名初级程序员，我正在构建一个游戏。每当玩家点击金色图像时，他应该获得 1 金币。所以我有以下 HTML 代码:

<li id="gold">Gold: 0</li>

这是起始黄金，通过 JQuery 我将其更新为:

$('#gold-image').click(function() {
    gold++;
    $('#gold').replaceWith('<li id="gold">Gold: ' + gold + '</li>');
});

但我不认为这是更新玩家拥有多少金币的最佳方式。有没有一种方法可以让我在 HTML 中编写来在变量发生更改或类似情况时更新变量，而不必替换整个项目？

游戏后期会有很多功能同时运行，金币数量不断增加，所以我认为替换HTML代码并不是最佳方式。

Answer 1

使用现有的 div <div id="gold">Gold: 0</div> 试试这个:

$('#gold-image').click(function() {
    gold++;
    $('#gold').html('Gold: ' + gold);
});

虽然上面的代码可以工作。我不会使用 jQuery 来做这样的事情。还有其他框架对于此类应用程序来说会更好。例如，您可以查看 AngularJS 或 Ember。

使用 AngularJS 的双向绑定(bind)可以实现相同的功能。 .

1) 标记:

<div controller="GameCtrl">
  <img src="/path/to/img.png" ng-click="goldClicked()">
  <div>Gold {{ gold }}</div>  
</div>

2) JavaScript 代码

app.controller('GameCtrl', function($scope) {
  $scope.gold = 0;
  $scope.goldClicked = function() {
    $scope.gold += 1;
  };
});

代码非常非常简单，您不需要处理选择器。每次您更改gold(或任何其他变量)时，它都会在 DOM 中自动更新。您将自动获得模块化代码和依赖注入(inject)。此外，您将以声明方式编写所有内容，并且将来您的代码将更易于阅读和更改。

更新:这是一个有效的 AngularJS fiddle :http://jsfiddle.net/absolutemystery/7WgYK/