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

时间:2017-03-23 10:11:29

标签: javascript jquery click

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

$(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 现在它只工作一次,第二次点击无效。 建议请。

3 个答案:

答案 0 :(得分:0)

使用append代替html,如:

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

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

答案 1 :(得分:0)

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

&#13;
&#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;
&#13;
&#13;

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

答案 2 :(得分:0)

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

&#13;
&#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;
&#13;
&#13;