JavaScript 添加到变量并在 div 中显示结果

Question

我只是在学习 javaScript 和 jquery 的基础知识，并尝试将这个简单的程序放在一起 http://codepen.io/mike-grifin/pen/oXjVYW .它只是一个显示数字的框，有两个按钮，一个加 10，另一个按钮减 10。我已将输出设置为警报，它似乎工作正常，但如果我删除警报(下图)，它不会输入结果放入容器 div。

$(document).ready(function(){
var startPoint = +90;
  $(document).find('#container').append(startPoint);

    if($('.increase').click(function(){
      startPoint += +10;

    }));

我也尝试再次附加 startPoint 变量，但它不会覆盖原来的:

$(document).ready(function(){
var startPoint = +90;

$(document).find('#container').append(startPoint);

    if($('.increase').click(function(){
      startPoint += +10;

      $(document).find('#container').append(startPoint);

    }));

所有代码都在codepen链接。如果它真的很明显或很容易，我只是在学习很抱歉。任何教育投入或建议将不胜感激。谢谢。

Answer 1

那是因为您要将值附加到#container 元素。如果你想直接改变文本，你可以使用 jQuery 的 text() 方法:

$(document).find('#container').text(startPoint);

CodePen Demo

这将用您传入的新文本覆盖当前文本。

.text(text)

Set the content of each element in the set of matched elements to the specified text.

– jQuery's text() documentation

---

还值得注意的是，您的 if (startPoint >= 100) 检查只会在您的 CodePen 演示首次加载时执行。如果您想使用此检查，您需要将 if 语句放在您的 click 事件处理程序中。