Question

我正在学习jQuerys animate并正在构建一个小游戏，用户必须通过点击它来抓住该框，并且每次点击时，得分增加1点，这将在屏幕内动态显示一个元素。

问题是分数未显示在。

通过调试应用程序，我可以看到分数实际上是递增的，因此排除了增量中的缺陷。唯一的另一种可能性我认为原因是因为$(document).ready并没有在每个click被触发，但这是错误的，因为得分确实增加了。因此，我能想到的唯一解决方案是，我实施.innerHTML的方式幕后发生了一些事情，但我无法理解它。

我尝试使用value()代替toString()，因为我最初认为获取变量value的实际points会返回其原始数值，但是没有做任何事情

以下是我遇到问题的jQuery行：

var points = 0;
$(document).ready(function () {
    Animate();
    div.on('mousedown', function () {
        points += 1;
        $('#points').innerHTML += points.toString();
    });
});

它引用的HTML标记：

<body>
    <p id="points">Total points: </p>
    <div id="box"></div>
    <script src="script.js"></script>
</body>

请注意，积分必须添加到 而非替换的内容，例如，如果积分增加会显示Total Points: 1

这是我的JFiddle，可以全面了解问题

Answer 1

Working Fiddle

HTML

<p id="points">Total points: <span id="total-points"></span></p>
<div id="box"></div>

删除此Javascript

$('#points').innerHTML += points.toString();

替换为

$('#total-points').text(points);

Answer 2

$(document).ready(function () {
    var totPoints="Total points: "; // define a variable with this string value
    Animate();
    div.on('mousedown', function () {
        points += 1;
        $('#points').html( totPoints+ points.toString()); // concatenate and add the html
        alert("Points" + points.toString());// Wrote this to prove that    points score IS being incremented
    });
});

Answer 3

使用innerHtml时，你可以直接使用$('#points').html( "Total points: "+ +points.toString());

工作jsFiddle

Answer 4

尝试使用$（“＃points”）。html（points）;这将有效。

使用带有jquery的.innerHTML会产生问题，因为jquery以与纯js不同的方式使用它。

innerHTML无法将文本注入标记

4 个答案:

Working Fiddle

HTML

删除此Javascript

替换为