Question

我需要知道和学习一件事。

$(document).ready(function() {
  $('.changetext').click(function() {
    $('.textarea').html('TEXT');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="changetext">click me</button>
<div class="textarea"></div>

此功能将TEXT添加到我的文本区域。但我需要它运行多次我点击它。我希望每次点击都添加TEXT 现在它只工作一次，第二次点击无效。建议请。

Answer 1

使用append代替html，如：

$('.textarea').append('TEXT');

说明： html删除旧数据并添加新数据，而append保留旧数据并添加新数据。

Answer 2

问题是因为您在每次点击时都将值设置为TEXT;你没有增加价值。为此，您可以使用val()，如下所示：

＆＃13;

$('.changetext').click(function() {
  $('.textarea').val(function(i, v) {
    return v + 'TEXT';
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class="textarea"></textarea>
<button class="changetext">Add</button>

＆＃13;

您可以使用append()更新值，但我相信这可能会在旧浏览器和/或jQuery版本中出现问题。

Answer 3

html()方法用新值覆盖/更新旧值。您可以使用append()方法追加新值：

＆＃13;

$(document).ready(function() {
  var words = ['I', 'love', 'this', 'website'];
  var counter = 0;
  $('.changetext').click(function() {
    if (words[counter]) {
      $('.textarea').append(words[counter] + " ");
    }
    counter++;
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<textarea class='textarea'></textarea>
<div class='changetext'>
  Change text
</div>

＆＃13;

Jquery函数只在需要多个时间时运行一次

3 个答案: