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

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

你非常接近，完成这项工作的几件事是：

您正在使用 <form> 标签，该标签将（默认情况下）尝试在输入时提交表单。如果您不向服务器发送任何内容，您可以删除此 html 标签
($this) 应该是 $(this) 因为您想使用 jquery 构造函数从 this 创建一个 jquery 对象上下文。
您只是附加了一个您不会在屏幕上看到的空 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>

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

How can I add new list items on field input?

html

javascript

css

jquery

sass