3

我有一个带有无序列表的简单 HTML 页面。是否可以有一个输入字段，您可以在其中向列表添加更多内容，并在您提交后保存。我想添加的是<li>标签内的内容以及<li>标签本身。

谢谢，

4

4 回答 4

2

这是一个 jsfiddle，其中包含我认为您想要实现的演示：http: //jsfiddle.net/mvJNq/25/

请注意，我无法回答您应该如何在服务器上执行此操作，因为这取决于您的服务器端代码、数据库等的设置方式。但是，如果您只想将其显示为 HTML，而不是在用户导航离开时将其保存，则根本不需要提交按钮 - 那么您只需要“添加”功能。

于 2012-07-27T14:34:01.013 回答
1

是的，这是可能的——不，它不会很漂亮。这是你要做的：

  1. 使用任何默认列表项/输入创建基本表单
  2. 使用 jQuery/JavaScript 将事件处理程序绑定到要添加另一个项目时单击的按钮（或者，您可以跳过此步骤并默认显示另一个项目）
  3. 在您的事件上（检查所有输入框是否有用户输入的文本，或第二步中的单击事件）使用 jQuery.append(...) 添加另一个列表项
  4. 确保您有一个隐藏的输入字段用作“计数器”，以跟踪列表项的总数并在每次添加新列表项时增加此计数器的值（注意：您可能需要使用ParseInt() 方法，取决于您如何设计该字段的代码）
  5. 接收表单输入的页面应首先读取隐藏字段，以便知道要添加多少项目，然后您应该循环遍历项目（for 或 while 循环）以正确添加它们

注意：我不知道您使用哪种服务器端语言来处理接收表单，因此第 5 步是一个相当通用且普遍可行的选项

于 2012-07-27T14:28:58.370 回答
1

当然，这是可能的。

当您想要“保存”这些项目时，就会出现这种情况的复杂性。如果用户离开页面并稍后返回，该数据是否可用？如果是这样，您将需要一个类似 mySQL 或类似的数据库。li 标签也可以存储，但为什么呢？

如果您只需要该会话中可用的信息，您可以将其存储在 JavaScript 变量中并让它循环通过变量并将它们作为<li>'s吐出

于 2012-07-27T14:23:37.510 回答
0

如果您确实想使用添加按钮而不是提交： 

$('#addButton').click(function(){
    var savedContent = $('#input').val();
}

要创建 + 插入，<li>您可以使用 javascript 创建元素并将其附加到 ul。如果您有多个 ul 更改索引：

var content = document.createElement('li');
content.innerText = savedContent;
document.getElementsByTagName('ul')[0].appendChild(content);
于 2012-07-27T14:39:25.630 回答