时间戳

首页 > 解决方案 > 使用 jQuery 附加用户输入

javascript - 使用 jQuery 附加用户输入

问题描述

我有以下 HTML 结构，无法更改。

我需要将用户键入的信息附加到<ul>带有 jQ​​uery 的列表中。我已经使用以下代码进行了尝试，但 id 什么也没做。正确的方法是什么？

$(document).ready(function() {
  $(".btn btn-outline-primary").click(function() {
    let toAdd = $("input[#title]").val();
    $("<li>" + toAdd + "</li>").appendTo("<ul>");
  });
});
<body>
  <div class="container">
    <div class="row">
      <div class="col-6">
        <h2>Add Show</h2>
        <form>
          <div class="form-group">
            <label for="title">Show Title</label>
            <input type="text" class="form-control" id="title" placeholder="enter title" />
          </div>
          <div class="form-group">
            <label for="rating">Show rating </label>
            <input type="number" min="0" max="10" value="5" class="form-control" id="rating" />
          </div>
          <button type="submit" class="btn btn-outline-primary">Add show</button>
        </form>
      </div>
      <div class="col-6">
        <h2> Show List</h2>
        <ul>
        </ul>
        <button class="btn btn-outline-secondary"> Delete List</button>
      </div>
    </div>
  </div>
</body>

</html>

标签： javascriptjqueryhtml

解决方案

一堆要修复的错误：

  • 用空格分隔选择器意味着在文档中搜索第一个选择器和第二个选择器的后代 - 你不希望在这里，将类名放在一起（或者只选择btn-outline-primary单独的，因为只有一个）

  • 您需要preventDefault()阻止表单提交和替换页面

  • ul如果要附加到 HTML 中，则应选择现有的 -'<ul>'不是有效的选择器。

  • #title应该被选为（毕竟 s 不能在 HTML 中重复）#title：id

$(".btn-outline-primary").click(function(e) {
  e.preventDefault();
  let toAdd = $("#title").val();
  $("<li>" + toAdd + "</li>").appendTo("ul");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-6">
      <h2>Add Show</h2>
      <form>
        <div class="form-group">
          <label for="title">Show Title</label>
          <input type="text" class="form-control" id="title" placeholder="enter title" />
        </div>
        <div class="form-group">
          <label for="rating">Show rating </label>
          <input type="number" min="0" max="10" value="5" class="form-control" id="rating" />
        </div>
        <button class="btn btn-outline-primary">Add show</button>
      </form>
    </div>
    <div class="col-6">
      <h2> Show List</h2>
      <ul>
      </ul>
      <button class="btn btn-outline-secondary"> Delete List</button>
    </div>
  </div>
</div>

推荐阅读