持续增值答案

【问题标题】：Add value continuously持续增值
【发布时间】：2014-12-17 16:36:41
【问题描述】：

我有一个 textarea 和一个按钮，我想不断地将值添加到 textarea。例如，如果我单击按钮两次，textarea 应该显示“aa”，如果我单击三次“aaa”等等，如果我单击按钮，基本上总是添加到字符串

这是我到目前为止提出的代码：

<textarea readonly="readonly" id="textarea"></textarea>
<input type ="button" value="a" id="button"/>

$(document).ready(function() {
$('#button').click(function() {

 $('#textarea').val(1);
 });

});

【问题讨论】：

... 甚至 id 都不匹配您的 HTML。
哦，我只是做了一个简短的例子......对不起

标签： javascript jquery click numbers add

【解决方案1】：

$(document).ready(function() {
 $('#button').click(function() {
 var exitingVal = $('textarea').val();
 $('textarea').val(existinVal + 'a'); 

 });
 });

【讨论】：

a 应该是一个字符串'a'。
..您可能不想重复 $('#textarea') - 也可以将其存储在变量中。
感谢您的指出。我实际上在记事本上写了代码所以错过了。
存储 $('#textarea') 会给我带来更好的性能还是仅仅为了干净的代码？
更好的性能（在这个小例子中显然不是，但通常你不想不断扫描 DOM 中的元素）

【解决方案2】：

看看下面这行

$('#textarea').val($('#textarea').val()+'a');

整页示例

<!DOCTYPE html>
    <html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
    $(document).ready(function() {
    $('#button').click(function() {

     $('#textarea').val($('#textarea').val()+'a');
     });

    });
    </script>
    </head>
    <body>

    <textarea readonly="readonly" id="textarea"></textarea>
    <input type ="button" value="a" id="button"/>


    </body>
    </html>

【讨论】：

【解决方案3】：

使用.val()回调函数的另一种方式：

$('#one').click(function() {
    $('#numfield').val(function(_, val){
        return val + 'a';
    });
 });

LIVE DEMO

【讨论】：

【解决方案4】：

类似这样的：

$('#button').click(function(){
   var $ta = $('textarea');
  $ta.val($ta.val() + 'a');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea readonly="readonly" id="textarea"></textarea>
<input type ="button" value="a" id="button"/>

【讨论】：