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

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 对象。

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>