如何将输入值添加到下面的结果列表并允许相同的文本输入字段继续添加更多？答案

【问题标题】：How can I add input values to a result list below and allow the same text input field to continue to add more?如何将输入值添加到下面的结果列表并允许相同的文本输入字段继续添加更多？
【发布时间】：2012-08-08 21:05:40
【问题描述】：

我有一个文本字段和一个随附的“添加”按钮：

<fieldset id="itemList">
    <input type="text" id="addItem" name="addItem">
    <input type="button" name="add" value="add">
</fieldset>

每当有人点击“添加”时，我想将新项目添加到下面的列表中并清除上面的输入字段。

<hr>
<ol id="resultList">
    <li>just example</li>
    <li>new text input</li>
    <li>last entered item</li>
</ol>

我不确定如何在 jQuery 中实现这一点。你能帮忙吗？

作为奖励，我想将列表限制为 10 个。所以我需要以某种方式计算列表项的数量，并使上述表单的显示取决于

你能帮忙吗？

【问题讨论】：

标签： javascript jquery ajax forms list

【解决方案1】：

jQuery(function($){
    $('input[name="add"]').click(function() {
        if($('#resultList li').length < 10)
        {    value = $('input[name="addItem"]').val();
             $('ol li:last').after("<li>" + value + "</li>");
             $('input[name="addItem"]').val(""); }
        if($('#resultList li').length == 10)
        {   $('input[name="addItem"]').css("display", "none");
            $('input[name="add"]').css("display", "none"); }
    });
});

在这里工作 jsFiddle：http://jsfiddle.net/bhZdz/2/

已编辑，因为我没有看到您问题的最后一部分，现在添加第 10 个元素后表单隐藏。

【讨论】：

【解决方案2】：

function addItem(){
  var list = $("#resultList");
  var count = list.find("li").size();
  if(count < 10){
     var input = $("input[name=addItem]");
     var item = input.val();
     list.append(("<li>"+item+"</li>"));
     input.val(" "); // clear field
  }else{
    // already have 10 items
  }
}
$("input[name=add]").click(addItem);

【讨论】：

【解决方案3】：

试试这个

 $('input[type=button]').click(function(){
    $('#resultList').append('<li>'+$('#addItem').val()+'</li>');
    $('#addItem').val("");
  }
 );

你也可以使用input[name=add]

【讨论】：