Question

以下代码将更新用户在单击按钮时在文本框中输入的显示值，但在此代码中，它不会保留用户输入的先前值。

<h1>Type your comment below </h1>
<input id="txt_name" type="text" value="" />    
<button id="Get">Submit</button> 
<div id="textDiv"></div> - 
<div id="dateDiv"></div>

jQuery(function(){
    $("button").click(function() {
        var value = $("#txt_name").val(); 
        $("#textDiv").text(value);
        $("#dateDiv").text(new Date().toString());
    });
});

现在我希望保留用户输入的所有值，当用户提交按钮时，显示前一个值和当前值。

如何实现这一目标？

以下代码可以帮助保留所有值

var $input = $('#inputId');    
$input.data('persist', $input.val() );

如果是，当用户点击按钮时，如何显示所有值，当前等等？

Answer 1

如果我做对了，这就是你需要的吗？

<h1>Type your comment below </h1>

<input id="txt_name" type="text" value="" />

<button id="Get">Submit</button> 

<script type="text/javascript">
    jQuery(function(){
    $("button").click(function() {
      var value = $("#txt_name").val(); 
      $("#section").prepend('<div class="textDiv">'+value+'</div>')
      $("#section").prepend('<div class="dateDiv">'+new Date().toString()+'</div>')
      $("#txt_name").val('');
    });
});
</script>

<!-- each time you press submit, a new line will be pushed here -->
<div id="section">
</div>

Answer 2

如果您只想显示用户提交的上一个和当前值，请使用数据函数：

$("button").click(function() {
    var input = $("#txt_name").val(); 
    var previous = $("#textDiv").data('previous') || '';
    $("#textDiv").text(previous+input);
    $("#textDiv").data('previous',input);
    $("#dateDiv").text(new Date().toString());
});

如果你想要所有的值而你想存储它们，那么我会创建一个数组。但是你总是可以连接字符串。

var arr = [];
$("button").click(function() {
    var input = $("#txt_name").val();
    arr.push(input);
    var previous = $("#textDiv").data('previous') || '';
    $("#textDiv").text(previous+input);
    $("#textDiv").data('previous',previous+input);
    $("#dateDiv").text(new Date().toString());
});

不使用.data()即可：

 $("button").click(function() {
    var input = $("#txt_name").val(); 
    $("#textDiv").text($("#textDiv").text()+input);
    $("#dateDiv").text(new Date().toString());
});

Answer 3

您可以使用单个div，而不是使用两个单独的div作为消息和日期。

<h1>Type your comment below </h1>
<input id="txt_name" type="text" value="" />
<button id="Get">Submit</button>
<div id="msgDiv"></div>

$(document).ready(function() {
  var preservedTxt = '';
  $("button").click(function() {
       var input = $("#txt_name").val();
       var date = new Date().toString();
       var msg = input + ' - ' + date;

       preservedTxt = preservedTxt + '<br>' + msg;

       $('#msgDiv').html(preservedTxt);
   });
});

Jsfiddle：https://jsfiddle.net/nikdtu/p2pcwj2f/

Answer 4

在数组中存储值将有助于

    jQuery(function(){
var name=[];
var time=[];
    $("button").click(function() {
        var value = $("#txt_name").val(); 
        name.push(value);
        $("#textDiv").text(name);
        time.push(new Date().toString())
        $("#dateDiv").text(time);

    });
});

Jquery：如何存储文本框值客户端和显示？

4 个答案: