javascript - Jquery将项目添加到列表而不重新加载页面

Question

我非常坚持应该如何实现这一点，主要是因为我缺乏 javascript 知识。这是我正在查看的代码：

http://jsfiddle.net/spadez/VrGau/

我想要做的是让用户可以在责任字段中键入添加“责任”，然后单击添加并将其显示在其上方的列表中。用户最多可以为 10 个职责执行此操作。

结果看起来像这样：

**Responsibility List:**

 - Added responsibility 1
 - Added responsibilty 2

*responsibility field - add button*

任何人都可以解释这应该如何完成，似乎它必须涉及 ajax。我真的很感激更多的信息，甚至是一个例子。

谢谢你。

编辑：这里有一点澄清。我希望将此数据作为项目列表发送到服务器。我已经看到了这个实现的例子，这里是一个截图：

用户在文本框中输入内容，然后单击“添加”，然后它会出现在其上方的列表中。此信息是提交给服务器的内容。

Answer 1

可能是这样的吗？

http://jsfiddle.net/VrGau/10/

var $responsibilityInput = $('#responsibilityInput'),
    $responsibilityList = $('#responsibilityList'),
    $inputButton = $('#send'),
    rCounter = 0;

var addResponsibility = function () {
    if(rCounter < 10){
        var newVal = $responsibilityList.val()+$responsibilityInput.val();
        $responsibilityList.val(newVal+'\n');
        $responsibilityInput.val('');
    }
}

$inputButton.click(addResponsibility);

Answer 2

也许这个也可以提供帮助，这仅限制 10 个列表

var eachline='';
$("#send").click(function(){
   var lines = $('#Responsibilities').val().split('\n');
   var lines2 = $('#Overview').val().split('\n');
   if(lines2.length>10)return false;
   for(var i = 0;i < lines.length;i++){
      if(lines[i]!='' && i+lines2.length<11){
       eachline += '- Added ' + lines[i] + '\n';
      }    
   }
   $('#Overview').text(eachline);
   $('#Responsibilities').val('');  
});   

在这里试试 http://jsfiddle.net/markipe/ZTuDJ/14/

Answer 3

为 textarea 字段添加 id

<textarea rows="4" cols="50" placeholder="Responsibilities"  id="resplist"></textarea>Add responsibility<br />
<textarea rows="4" cols="50" placeholder="How to apply" id="inputresp"></textarea>

你需要 Jquery。使用这个js代码

var i=0;
$("#send").click(addresp);
function addresp()
{
    if (i<10)
    {
        $("#resplist").val($("#resplist").val()+$("#inputresp").val()+'\n');
        $("#inputresp").val("");
        i++;
    }
}

http://jsfiddle.net/br0nsk1y/bDE9W/

Answer 4

这取决于您是否要将数据发布到服务器。如果只在客户端你可以这样做。

$("#send").on("click", function(event){
    if($("#list li").size() < 10){
        $("#list").append("<li>" + $("#responsibilities").val() + "</li>");
    }
});

http://jsfiddle.net/VrGau/7/