Question

我尝试将文本从列表中的输入中放置，并允许用户添加多个项目，新项目将添加到顶部。我使用.prepend，它应该将新项目添加到顶部，而是替换现有元素。有什么想法吗？

function getParameter(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
function postMessage(){
    var currentTime = new Date().getSeconds(),
        thoughts = getParameter("post"),
        message = "<li>" + thoughts + " - " + currentTime + "</li>";
    $("#list").prepend(message);
}
$("form").on( "submit", postMessage());

Answer 1

这是因为提交表单时会重新加载页面。因此，您的内容并未真正被替换，实际上发生的是（1）页面重新加载清除所有内容，以及（2）作为参数添加到URL的输入现在作为第一个被添加到列表中，只有内容。

为防止这种情况，您可以：

通过更改
来防止表单的默认行为 $("form").on("submit", postMessage());到
$("form").on("submit", function(e){e.preventDefault(); postMessage();});。
将<input type="submit" />更改为<input type="button" />（常规按钮），完全绕过整个提交问题。由于表单不需要提交，因此提交按钮确实没有必要，甚至有点错位。您也不需要阻止任何默认行为，在我看来这更为清晰 此选项有我的偏好，因此我将在下面详细解释此选项：

$(window).on("load", function(){
  $(".input").click(function() {
    $(this).select();
  });
  
  $("#search .submit").click(function(){
    var currentTime = new Date().getSeconds(),
        thoughts = $("#search .input").val(),
        message = "<li>" + thoughts + " - " + currentTime + " seconds </li>";
    $("#list").prepend(message);  
  });
});

html{
  height: 100%;
}
body{
  background: #fff;
  font-size: 13px;
  min-width: 800px;
}
br{
  clear: left;
}

#header{
  background:cornflowerblue;
  padding: 10px 5px;
  box-shadow: 0px 1px 5px #fff;
  text-align:center;
}
#search{
  display: inline-block;
}
.input{
  width: 300px;
  padding: 2px 3px;
  border: 2px solid #A2C4DA;
  font-size: 1.2em;
  line-height:2;
}
.submit{
  padding: 6px 12px;
  vertical-align: top;
  font-weight: bold;
  text-shadow: 1px 1px 1px #fff;
  background:#fff;
  border: 1px solid #6FD6F7;
  line-height:2;
}
.submit:hover{cursor:pointer;}

#page{
  width: 800px;
  background: dodgerblue;
  border: 1px solid #ffffff;
  margin: 10px auto 0px;
  padding: 1em 2em;
  font-size:2em;
}
#page li{
  list-style:none;
  text-align:center;
  color: #fff;
  border-top:1px solid #fff;
}
#page li:nth-child(n+1){
  border:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="header">
  <div id="search">
    <form>
      <input type="text" class="input" placeholder="thoughts?" />
      <input type="button" class="submit" value="Post" />
    </form>
  </div>
  <br>
</div>

<div id="page">
  <ul id="list"></ul>
</div>

codepen：http://codepen.io/anon/pen/yefcw

由于页面不再重新加载，因此您无法再使用thoughts = getParameter("post")。由于页面未重新加载，因此不会向URL添加任何参数为了让它再次起作用，我将该行更改为thoughts = $("#post").val()。
我给了<input type="text"/>和<input type="button"/>这两个类，所以它们可以被JS和CSS引用。我从输入字段中删除了name，因为在这种情况下不需要它（我本可以使用ID而不是类，但这些类为您提供了更大的灵活性。例如，如果您想在页面上使用第二个输入表单，就像这样，您可以复制粘贴它，除了<div id="search">需要另一个ID。然后，在JS中创建另一个点击处理程序，例如$("#search .submit").click(，您还可以将#search更改为新ID。
但是在CSS中你不得不做任何改变，因为类.input和.submit的CSS规则也会设置新输入字段和按钮的样式。）
我相应地更新了CSS选择器以引用新类。
我从您的表单中删除了method="get"，因为它已不再使用或不再需要了。
我删除了getParameter()功能，因为您不再需要它了。
我添加了$("#input").click(...函数，当您单击它时，它会选择输入字段中的所有文本。这不是必需的，但我认为它可能更加用户友好。
我将您的代码包装在window.load中。这是一个很好的做法，以确保在页面完全加载之前不执行代码。

Answer 2

在您的代码中，提交按钮正在提交导致整个页面重新加载/重置的表单。重新加载页面会导致<ul>在没有内容的情况下重新加载，然后插入内容。每次都重复这一过程。您可能需要考虑不使用<form>处理来获取输入数据。

Answer 3

function getParameter(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
function postMessage(){
 var currentTime = new Date().getSeconds(),
  thoughts = $("#post").val(),
  message = "<li>" + thoughts + " - " + currentTime + " seconds </li>";
 $("#page").prepend(message);
  $("#post").val("");
}
$("form").on( "submit", function(e){
  e.preventDefault();
  postMessage();
});

并在输入文本框中输入一个id

<input type="text" name="post" id="post" placeholder="thoughts?"/>

jQuery .prepend正在替换我的内容，而不是将其添加到开头

3 个答案: