按钮点击

Question

如何使输入值显示按钮单击时的每个输入而不删除先前的输入？

$(document).ready(function(){
  $("#btn").click(function(){
    var getVal = $("#inputValue").val();
    $("p").html(getVal);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
  <fieldset>
    <legend>jQuery input value</legend>
    <input id="inputValue" type="text" name="text">
  </fieldset>
  <button id="btn">display value</button>
  <p></p>
</div>

Answer 1

您有两种选择：

1. 将内容添加到之前的内容：
＆＃13;
＆＃13;
$(document).ready(function(){
  $("#btn").click(function(){
    var getVal = $("#inputValue").val();
    $("p").html($("p").html() + " " + getVal);
  });
});
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
  <fieldset>
    <legend>jQuery input value</legend>
    <input id="inputValue" type="text" name="text">
  </fieldset>
  <button id="btn">display value</button>
  <p></p>
</div>
＆＃13;
＆＃13;
＆＃13;
1. 使用append代替html：
＆＃13;
＆＃13;
$(document).ready(function(){
  $("#btn").click(function(){
    var getVal = $("#inputValue").val();
    $("p").append(getVal);
  });
});
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
  <fieldset>
    <legend>jQuery input value</legend>
    <input id="inputValue" type="text" name="text">
  </fieldset>
  <button id="btn">display value</button>
  <p></p>
</div>
＆＃13;
＆＃13;
＆＃13;

您使用html会覆盖p元素的内容。

Answer 2

您的意思是，将价值追加为价值历史吗？

如果是，append()就是答案。

$(document).ready(function() {
    $("#btn").click(function() {
        var getVal = $("#inputValue").val();
        $("p").append(getVal);
    });
});

在此处了解更多信息，http://api.jquery.com/append/

Answer 3

使用append代替html

$(document).ready(function(){
$("#btn").click(function(){
    var getVal = $("#inputValue").val();
    $("p").append(getVal); <--- CHANGE HERE
});

append html

Answer 4

建议将ID添加到p标记中，并用空格分隔值

$(document).ready(function(){
  $("#btn").click(function(){
    var getVal = $("#inputValue").val() + " " ;
    $("#showInputValue").append(getVal);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
  <fieldset>
    <legend>jQuery input value</legend>
    <input id="inputValue" type="text" name="text">
  </fieldset>
  <button id="btn">display value</button>
  <p id="showInputValue"></p>
</div>