如何在输入框中显示或删除li标签而不是文本

Question

我现在正在尝试解决一些棘手的JavaScript问题。

以下两张图片可以说明我的困境。

正如你所看到的，我希望使用带有删除按钮而不是文本的li标签，如果我点击+按钮，我希望显示可选择的项目，如果我选择其中一些并点击完成，则将它们显示为li第一张图像的输入框中的标签。

我不想要完整的来源，但希望得到如何处理这个问题的指示。

如果你可以推荐任何javascript库或代码来解决这个问题，我将非常感激。

请帮帮我!!!

Answer 1

您要做的是复选框的变体，不是吗？该字段实际上显示了所选的框（<li>），而对话框显示了用户可以添加的其余未选择的框？

我会通过在这些框上放置一个类来表明它们是否被选中。然后，一个简单的css规则将根据该类显示或隐藏（display: none或display: block）。然后单击其中一个项目（在主视图中）的关闭框，或单击项目本身（在对话框中）将切换选定的状态。

其他一些小调：

• 我不会使用“已选中”或“已选中”作为您的班级名称，因为它可能与内置功能发生冲突，或者至少令人困惑。
• 如果您还在显示屏上使用float: left，那么这些框应该可以很好地填充空间。
• 最后，您可能希望拥有两个（重复）项目列表：一个用于字段中的选定项目，另一个用于对话框中未选择的项目。两者都包含完整的可能性列表，并具有相同的类值（您必须在事件处理代码中维护）。否则你会尝试在文档中的两个位置使用相同的DOM节点，这对我来说太可怕了。