Question

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

我在下面包含了我的HTML。

Selection.EndKey Unit:=wdStory

jQuery：

<!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>

到目前为止，这就是我所拥有的。它运行得非常完美，希望我不希望它循环运行，而我只希望它运行一次，因此看起来就像其他学生一样（随附的屏幕截图）。 student

     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>");
  });
});

截屏：

Answer 1

$(".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()。我先留给你试一试。尽管我在这里确实给了您一些有关使用唯一可用的唯一标识符的提示;）

我需要帮助，只需单击按钮即可将输入字段从div添加到另一个div

1 个答案: