使用JQuery更新HTML中的变量
[英]Updating Variable in HTML with JQuery
问题描述
我是一名初学者，正在开发游戏。 每当玩家点击黄金图像时，他应该获得1黄金。 所以我有以下HTML代码：
<li id="gold">Gold: 0</li>
那是开始的黄金，通过JQuery我用以下方法更新它：
$('#gold-image').click(function() {
gold++;
$('#gold').replaceWith('<li id="gold">Gold: ' + gold + '</li>');
});
但是我不认为这是更新玩家拥有多少金币的最佳方法。 是否有一种方法可以在HTML中编写以在变量被更改时或类似的时候更新变量而不必替换整个项目？
在游戏的后期，将同时运行许多功能并增加黄金数量，因此我认为替换HTML代码不是最佳方法。
6 个解决方案
解决方案1
0 已采纳 2014-04-06 17:59:25
使用您现有的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;
};
});
代码非常简单，您无需处理选择器。 每次更改黄金 （或任何其他变量）时，它将在DOM中自动更新。 您将自动获得模块化代码和依赖项注入。 另外，您将以声明方式编写所有内容，并且您的代码将来将更易于阅读和更改。
更新：这是一个可用的AngularJS小提琴： http : //jsfiddle.net/absolutemystery/7WgYK/
解决方案2
0 2014-04-06 18:00:56
或者，仅在数字周围使用div（例如<div id="gold">0</div> ），
$('#gold-image').click(function() {
$('#gold').html(++gold);
});
解决方案3
0 2014-04-06 18:04:52
您可以使用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++;
}
})
解决方案4
0 2014-04-06 18:05:29
如果您可以添加<span>元素，它将使其更加简洁：
HTML：
<li>Gold: <span id="gold">0</span></li>
JAVASCRIPT：
$('#gold-image').click(function() {
gold++;
$('#gold').text(gold);
});
解决方案5
0 2014-04-06 18:07:57
您可以为此使用自定义事件。 每次黄金值更新时，您可以触发一个事件，并传递一个参数，例如：
$('#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>
解决方案6
0 2014-04-06 19:00:27
您可以根据需要使用简单的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字符串
[英]Updating HTML string containing a variable after the variable is updated in jQuery
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.