如何附加用户输入?jQuery.

How do I append user input? jQuery

本文关键字：jQuery 输入 用户 何附加      更新时间：2023-09-26

>我正在尝试创建一个待办事项列表。当我打开html文件(我使用的是谷歌浏览器(时，似乎有两个问题：

  1. 该按钮似乎不是按钮，因为它没有单击。
  2. 当我按回车键而不是尝试单击添加按钮时，文本就会消失。

但在这两种情况下，这两种方法都不会追加用户输入。我需要修复什么？

我有以下几点：

$(document).ready(function() {
  $('#button').click(function() {
    var toAdd = $('input[name=checkListItem]').val();
    $('.list').append("<div class='item'>" + toAdd + "</div>");
  });
});
h2 {
  font-family: arial;
}
form {
  display: inline-block;
}
#button {
  display: inline-block;
  height: 20px;
  width: 70px;
  background-color: #cc0000;
  font-family: arial;
  font-weight: bold;
  color: #ffffff;
  border-radius: 5px;
  text-align: center;
  margin-top: 2px;
}
.list {
  font-family: garamond;
  color: #cc0000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<h2>To Do</h2>
<form name="checkListForm">
  <input type="text" name="checkListItem" />
</form>
<div id="button">Add!</div>
<br/>
<div class="list"></div>

  1. 给某些东西id按钮并不能使它成为一个按钮。也许你应该试试：<button id="button>Add!</button>
  2. 当您按回车键时，您正在提交表单，因为您没有任何 javascript 拦截表单的 onSubmit 事件，它会重新加载页面。

如果您希望在用户按 Enter 时执行此操作，则应在窗体内移动按钮并将事件更改为$('form[name="checkListForm"]').on('submit', ...)

好的，所以我在这里看到了一些问题。首先，div 不是一个按钮。我的意思是你可以做样式来让它看起来像一个按钮，但为什么不直接使用：

<button type="button"> Add </button>

此外，您可以只使用 onclick，而不是定义该单击事件。我发现这通常更干净：

<button type="button" onclick="the_function();"> Add </button>

然后在你的javascript中定义函数：

function the_function()
{
    var toAdd = $('input[name=checkListItem]').val();
    $('.list').append("<div class='item'>" + toAdd + "</div>");
});

但是，您最好像这样在输入上放置一个 id：

<input type="text" id="check-list-input" name="checkListItem"/>

显然，您不需要使用该命名约定。完成此操作后，您可以将该函数修改为：

function the_function()
{
    var toAdd = $('#check-list-input').val();
    $('.list').append("<div class='item'>" + toAdd + "</div>");
});

但这仍然没有达到应有的水平。该列表也应该是一个 id 而不是一个类。如果页面上有多个列表，则会导致问题。而是这样做：

<div class="list" id="list-div"></div>

然后，您可以将函数修改为：

function the_function()
{
    var toAdd = $('#check-list-input').val();
    $('#list-div').append("<div class='item'>" + toAdd + "</div>");
});

所以最终结果应该是：

<!DOCTYPE html>
<html>
    <head>
        <title>To Do</title>
        <link rel="stylesheet" type="text/css" href="stylesheet.css"/>
        <script type="text/javascript" src="script.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    </head>
    <body>
        <h2>To Do</h2>
        <form name="checkListForm">
            <input type="text" id="check-list-input" name="checkListItem"/>
        </form>
        <button type="button" onclick="the_function();"> Add </button>
        <br/>
        <div class="list" id="list-div"></div>
    </body>
</html>

对于你的jQuery(不再需要准备好文档，只要确保在html之前包含javascript文件或片段(：

function the_function()
{
    var toAdd = $('#check-list-input').val();
    $('#list-div').append("<div class='item'>" + toAdd + "</div>");
});

我还没有测试这个，但我希望它对你有用。

相关文章：