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的双向绑定可以实现相同的功能。

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中更新。您将自动获得模块化代码和依赖注入。此外，您将以声明方式编写所有内容，并且您的代码将更容易阅读，并且将来很容易更改。

更新：这是一个有效的AngularJS小提琴：http://jsfiddle.net/absolutemystery/7WgYK/

Answer 2

或者，仅在数字周围使用div（例如<div id="gold">0</div>），

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

Answer 3

您可以使用Ember.js来处理此类事情。 Ember.js是一个MVC javascript库。

在这种情况下：

<li id="gold">Gold: {{YourController.goldAmmount}}</li>

并且在你的控制器中你只需要调用函数updateAmmount（）：

var YourController= Em.ArrayController.create({
   goldAmmount : 0,

   updateAmmount : function(){
      this.goldAmmount++;
   }

})

Answer 4

如果您可以添加<span>元素，那么它会更清洁一些：

HTML：

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

JAVASCRIPT：

$('#gold-image').click(function() {
    gold++;
    $('#gold').text(gold);
});

Answer 5

您可以使用自定义事件。每次黄金值更新时，您都可以触发事件，传递参数，例如：

$('#gold-image').click(function() {
    gold++;
    jQuery.event.trigger({type: "onGoldUpdate",val:gold});
});

之后，您可以随时听取该事件，并使用此信息执行任何操作，例如：

jQuery(document).on("onGoldUpdate", function(e){  
    var goldValue = e.val;
    jQuery('.gold .value').html(goldValue);
});

在HTML部分，您可以在值周围添加一个范围：

<li id="gold">Gold: <span class="value">0</span></li>

Answer 6

您可以根据需要使用简单的MVVM解决方案，例如Knockout.js。您可以创建模型并将其值绑定到html中的某个位置，只要您更新模型中的值，渲染的html就会自动更新而不会受到干扰。如何在这里使用它的快速示例...

<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
<script>
function PlayerModel() {

    // the player score
    this.playerGold = ko.observable(0);

    // The increase gold function to add 1 to the player score
    this.increaseGold = function() {
        var oldScore = parseInt(this.playerGold());
        this.playerGold(++oldScore);
    };
}

var model = new PlayerModel();

$( document ).ready(function() {
    ko.applyBindings(model);
});

</script>
</head>
<body>Gold : <strong data-bind="text: playerGold"></strong></li>
<button onclick="javascript:model.increaseGold()">Standard JS - Increase gold</button>
<button data-bind="click: increaseGold">KO Data bound -Increase gold</button>


</body>
</html>

就这么简单。如果需要，您可以轻松地将更多变量添加到播放器模型中。我喜欢这种方法，因为它可以让事情变得简单，但也可以让你对实现有很多控制.Ember是另一个很好的选择。

使用JQuery更新HTML中的变量

6 个答案: