使用 javascript 或 jquery +1 按钮答案

【问题标题】：+1 to button using javascript or jquery使用 javascript 或 jquery +1 按钮
【发布时间】：2017-08-16 03:02:14
【问题描述】：

我想在单击按钮时增加一个按钮值，稍后我需要将其提交到我的数据库。

我目前正在执行如下所示的操作，但是当我单击按钮时，会显示递增的值，并且按钮文本“GOAL”会消失。

我怎样才能使它在单击按钮时将按钮名称更改为递增值而不是 A. 删除按钮名称或 B：必须使用输入字段来显示结果

我希望它显示如下：

GOAL then GOAL    etc etc
(1)       (2)

html

<button type="button" id ="button1" class="btn btn-lg btn-primary">GOAL</button>

jquery

$('#button1').click(function() {
    $('#button1').html(function(i, val) { return (val*1+1) });
});

【问题讨论】：

标签： javascript jquery html button increment

【解决方案1】：

我不太了解你，但如果你想保留 goal 字符串并在它之后增加点击次数，这是一个解决方案：

(function(){
  var goalStr = 'GOAL ';
  // You can read it from the button as well
  // var goalStr  = $('#button1').text();
  var i = 0;
  $('#button1').click(function() {
    i++;
    $(this).text(goalStr+i);
  });
})();

【讨论】：

【解决方案2】：

我是这样写的：

let v;
let firstTime = true;
$('#button1').click(function() 
{
    if (firstTime) {
        v = 1;
        firstTime = false;
    } else {
        v++;
    }
    $(this).html(v);
});

【讨论】：

【解决方案3】：

也许您可以在此button 中添加一个span 元素，并在用户单击按钮时更改span 的内容。

html

<button type="button" id ="button1" class="btn btn-lg btn-primary">
GOAL<br>(<span>1</span>)
</button>

jQuery:

$('#button1').click(function() {
    $('#button1 span').html(function(i, val) { return (val*1+1) });
});

【讨论】：

【解决方案4】：

只需像这样在按钮的 HTML 中添加文本

<!DOCTYPE html>
<html>

    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    </head>

  <body>

    <button type="button" id ="button1" class="btn btn-lg btn-primary"><span class="btn-text">GOAL</span><div class="btn-value"></div></button>

    <script>
        $('#button1').click(function() {
            $('#button1').find('.btn-value').html(function(i, val) {return (val*1+1); });
        });
    </script>

  </body>
</html>

【讨论】：