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 var，但它不会覆盖原始的：

$(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

您需要在.text()之前将#container的{{1}}设置为新值，或者将.empty()旧数据设置为.append()。

$('.increase').click(function(){
  $('#container').text(startPoint += +10);
});

另外，您不需要将$('.increase').click()包裹在if中它会在点击时触发，您不需要说＆＃34; if（点击此处）＆＃34;

.click()函数

暗示了这一点

Answer 2

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

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

CodePen Demo

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

.text(text)

将匹配元素集中每个元素的内容设置为指定文本。

- jQuery's text() documentation

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

Answer 3

您需要在追加

之前删除内容

我使用了empty（）

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

        if($('.increase').click(function(){
          startPoint += 10;
          $('#container').empty().append(startPoint);
        }));

        if($('.decrease').click(function(){
          startPoint -= 10;
          $('#container').empty().append(startPoint);
        }));

        if(startPoint >= +100){
           $('#container').empty().append(startPoint);
        }

  });

Answer 4

首先..对于div你可以使用.text（）或.html（）第二步..将你的if语句移动到.increase click事件

$(document).ready(function(){
      var startPoint = +90;
       $(document).find('#container').append(startPoint);
        $('.increase').on('click',function(){
           if(startPoint >= +100){
              alert('dayum!!');
           }else{
              $('#container').text(startPoint += +10);
           }
        });
        $('.decrease').on('click',function(){
          $('#container').text(startPoint -= +10);
        });
  });

Answer 5

阅读本文：http://www.w3schools.com/jquery/html_html.asp并且 .html() and .append() without jQuery

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

        if($('.increase').click(function(){
          alert(startPoint += +10);
          $("#container").html(startPoint) //added
        }));

        if($('.decrease').click(function(){
          alert(startPoint -= +10);
          $("#container").html(startPoint) //added
        }));

        if(startPoint >= +100){
          alert('dayum!!');
        }

  });

使用此代码，这有助于您：）

JavaScript添加到变量并在div

5 个答案:

`.text(text)`