如何在字段輸入中添加新列表項？

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 的一個例子。 當您按下帶有輸入字段值的添加按鈕時，它會創建元素。

鏈接在這里