时间戳

首页 > 解决方案 > 我需要帮助在单击按钮时将输入字段从 div 添加到另一个 div

jquery - 我需要帮助在单击按钮时将输入字段从 div 添加到另一个 div

问题描述

我需要帮助，通过单击按钮将我的 newContainer div 中的字段输入添加到我的容器 div。这是额外的功劳分配说明： - 在页面某处创建一个表格并设置样式。- 表单需要包含姓名、电话、电子邮件和地址字段以及提交按钮。- 当用户单击提交按钮时，需要将新学生添加到列表中，并且搜索需要重置并显示所有学生。

我在下面包含了我的 HTML。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Assignment 6</title>
  <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
    <div class="newContainer">
        <div>
          <p><input id="name" type="text" placeholder="Enter New Name"/></p>
          <p><input id="phone" type="text" placeholder="Enter Phone #"/></p>
          <p><input id="email" type="text" placeholder="Enter Email"/></p>
          <p><input id="address" type="text" placeholder="Enter Address"/></p>
          <button type="button" id="btn1">Add New</button>
        </div>
        <div class="newStudent"></div>
    </div>
    <div class="container">
      <div>
        <input class="search" type="text" placeholder="Enter Name"/>
      </div>
      <div class="students"></div>
    </div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.1.2/handlebars.js"></script>
<script src="index.js"></script>
</body>
</html>

jQuery：

     const searchElement = document.querySelector('.search');
    const studentsElement = document.querySelector('.students');
    const newContainer = document.querySelector('.newContainer');

    let students= [];
    console.log(students);

    $("#newContainer").click(contents().appendTo('#container').end().fadeOut());

    let template = `
        {{#each students}}
        <div class="student">
            <p>{{name}}</p>
            <a href="mailto:{{email}}">{{email}}</a>
            <br />
            <a href="tel:{{phone}}">{{phone}}</a>
            <p>{{address}}</p>
            <button class="remove" onclick="removeStudent({{ @index }})">Remove</button>
        </div>
        {{/each}}
    `;


    /**
     * Renders the template with the given data.
     * @param context The date to render.
     */
    function render(context) {
      let compiled = Handlebars.compile(template);
      studentsElement.innerHTML = compiled(context);
    }

    function searchHandler(event) {
      //TODO: 5
      let val = searchElement.value;
      render(template);
      // TODO: 6
        console.log(val);
      let filteredStudents = students.students.filter(function (student) {
          console.log(student.name);
        return student.name.toLowerCase().includes(val.toLowerCase());
    })

      let dataCopy = {
        students: filteredStudents
      };

      render(dataCopy);
    }

    $.ajax({
      url: 'https://my-json-server.typicode.com/it238-sp-2019/db-test/students',
      method: 'GET'
     // TODO: 1
    }).done(function (resp) {
      console.log(resp);
      students = {students : resp}
      render(students);
    });
    function removeStudent(index) {
      // TODO: 7
        students.students.splice(index, 1);
      console.log(index);
        searchHandler();

      console.log(students);
    }
// TODO: 4
searchElement.addEventListener('input', searchHandler);

到目前为止，这就是我所拥有的。它工作得几乎完美，我不希望它循环我希望它只运行一次，所以它看起来像其他学生（附上截图）。学生

var s = $(".students");
$(document).on("click", "#btn1", function() {
  $(".newContainer input").val(function() {
    let n = $("#name");
    let p = $("#phone");
    let e = $("#email");
    let a = $("#address");
    s.append("<div class='student'><p>" + n.val() + "</p><a href='mailto:" + e.val() + "'>" + e.val() + "</a><br /><a href='tel:" + p.val() + "'>" + p.val() + "</a><p>" + a.val() + "</p><button class='remove' onclick='removeStudent()'>Remove</button></div>");
  });
});

模板：

{{#each students}}
    <div class="student">
        <p>{{name}}</p>
        <a href="mailto:{{email}}">{{email}}</a>
        <br />
        <a href="tel:{{phone}}">{{phone}}</a>
        <p>{{address}}</p>
        <button class="remove" onclick="removeStudent({{ @index }})">Remove</button>
    </div>
    {{/each}}

截屏： 截屏

标签： jquery

解决方案

$(".newContainer").html()会将整个 div 中的所有内容作为 HTML 抓取。

要仅获取所有字段内容，input必须引用每个内容以使用.val(). 假设您想获取容器中的所有输入，.each()可以遍历选定元素集。

编辑：更新为每个学生填写一个模板，而不是遍历每个任意字段。

$(document).on("click", "#btn1", function() {
  let n = $('#name').val(),
    p = $('#phone').val(),
    e = $('#email').val(),
    a = $('#address').val();

  $(".students").append("<div class='student'><p>" + n + "</p><a href='mailto:" + e + "'>" + e + "</a><br /><a href='tel:" + p + "'>" + p + "</a><p>" + a + "</p><button class='remove' onclick='removeStudent(" + e + ")'>Remove</button></div>");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="newContainer">
  <div>
    <p><input id="name" type="text" placeholder="Enter New Name" /></p>
    <p><input id="phone" type="text" placeholder="Enter Phone #" /></p>
    <p><input id="email" type="text" placeholder="Enter Email" /></p>
    <p><input id="address" type="text" placeholder="Enter Address" /></p>
    <button type="button" id="btn1">Add New</button>
  </div>
  <div class="newStudent"></div>
</div>
<div class="container">
  <div>
    <input class="search" type="text" placeholder="Enter Name" />
  </div>
  <div class="students"></div>
</div>

从将您尝试的代码更新为工作解决方案的一些希望有用的提示：

  • 声明 ( let, var, const) 可以使用逗号来声明多个变量。这有助于节省 JS 文件的空间并保持代码更简洁。
  • $(".newContainer input")input仅在迭代引用元素下的每个元素时才需要.newContainer。直接通过其唯一 ID 引用每个元素时不需要它。
  • .val()在变量声明期间每个元素调用一次比在附加期间多次调用更有效。一般重构和性能考虑。
  • 从您的代码中不清楚您打算如何实现removeStudent(). 我先把它留给你试一试。虽然我在这里确实给了你一个关于使用现成的唯一标识符的提示；）

推荐阅读