如何在字段输入中添加新列表项？

Question

我正在开发一个简单的待办事项应用程序。

我想在用户单击输入框中的输入后添加一个新元素，但没有任何反应。 我尝试了很多方法，我将分享最近的代码。 你有什么建议吗？ 非常感谢。

更新：它终于起作用了。 更新：它终于起作用了。 更新：它终于起作用了。

 $(document).ready(function() { // Input - creating a new element // $(':input').on('keypress', function(e) { if (e.which == 13 && $('#text').val().length.= 0) { var input = ($this).val() $('.elements');append('<div class="text-box"></div>'), // i would like to add other elements inside a div. but i need to first get it work; // } }); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <header> <img src="img/bg-desktop-dark.jpg" alt="background"> </header> <section> <div class="container section-content"> <div class="headline"> <h1>TODO</h1> <img src="img/icon-sun.svg" class="switcher" alt="switcher"> </div> <div class="create"> <p class="circle"></p> <form><input type="text" placeholder="Create a new todo" id="text"></form> </div> <div class="elements"> <div class="text-box"> <p class="circle"><img class="img-inactive" src="img/icon-check.svg"></p> <p class="text">Vytvořit todo appku</p> </div> <div class="text-box"> <p class="circle"><img class="img-inactive" src="img/icon-check.svg"></p> <p class="text">Vytvořit todo appku</p> </div> <div class="text-box"> <p class="circle"><img class="img-inactive" src="img/icon-check.svg"></p> <p class="text">Vytvořit todo appku</p> </div> </div> <div class="bottom"> <p class="items-left">5 items left</p> <div class="functions"> <p class="all">All</p> <p class="active">Active</p> <p class="completed">Completed</p> </div> <p class="clear">Clear completed</p> </div> </div> </div> </section>

Answer 1

你非常接近，使这项工作的一些事情是：

1. 您正在使用<form>标记，该标记将（默认情况下）尝试在输入时提交表单。 如果您不向服务器发送任何内容，您只需删除此 html 标签

2. ($this)应该是$(this)因为您想使用 jquery 构造函数从this上下文中创建 jquery object。

3. 您只是附加了一个在屏幕上看不到的空 div。 您必须将input文本添加到 div 的正文中。

 $(document).ready(function() { // Input - creating a new element // $(':input').on('keypress', function(e) { if (e.which == 13 && $('#text').val().length.= 0) { var input = $(this).val() $('.elements');append(`<div class="text-box">${input}</div>`), // i would like to add other elements inside a div. but i need to first get it work; // } }); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <header> <img src="img/bg-desktop-dark.jpg" alt="background"> </header> <section> <div class="container section-content"> <div class="headline"> <h1>TODO</h1> <img src="img/icon-sun.svg" class="switcher" alt="switcher"> </div> <div class="create"> <p class="circle"></p> <input type="text" placeholder="Create a new todo" id="text"> </div> <div class="elements"> <div class="text-box"> <p class="circle"><img class="img-inactive" src="img/icon-check.svg"></p> <p class="text">Vytvořit todo appku</p> </div> <div class="text-box"> <p class="circle"><img class="img-inactive" src="img/icon-check.svg"></p> <p class="text">Vytvořit todo appku</p> </div> <div class="text-box"> <p class="circle"><img class="img-inactive" src="img/icon-check.svg"></p> <p class="text">Vytvořit todo appku</p> </div> </div> <div class="bottom"> <p class="items-left">5 items left</p> <div class="functions"> <p class="all">All</p> <p class="active">Active</p> <p class="completed">Completed</p> </div> <p class="clear">Clear completed</p> </div> </div> </div> </section>

Answer 2

这是 w3schools 的一个例子。 当您按下带有输入字段值的添加按钮时，它会创建元素。

链接在这里