如何在欄位輸入中添加新的串列項？

我正在開發一個簡單的待辦事項應用程式。

我想在用戶單擊輸入框中的 Enter 后添加一個新元素，但沒有任何反應。我嘗試了很多方法，我將分享最近的代碼。你有什么建議嗎？非常感謝。

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

$(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 ></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>

uj5u.com熱心網友回復：

您非常接近，使這項作業成功的幾件事是：

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 >${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>

uj5u.com熱心網友回復：

這是 w3schools 的一個例子。當您按下帶有輸入欄位值的添加按鈕時，它會創建元素..

鏈接在這里

標籤：

上一篇：使用Jquery洗掉腳本

下一篇：將滑鼠懸停在一個div上時，如何將一個類添加到另一個div？