基于Jquery的动态添加控件并取值的实现代码

以下是基于JQuery的动态添加控件并取值的实现代码攻略：

步骤一：在HTML中添加基本的页面结构

首先，在HTML中添加基本的页面结构，包含一个用于添加元素的按钮和一个用于显示所添加元素的容器。可以使用以下代码：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>动态添加控件并取值</title>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" ></script>
  </head>
  <body>
    <h1>动态添加控件并取值的实现</h1>
    <button id="add-card">添加卡片</button>
    <div id="card-container"></div>
  </body>
</html>

步骤二：编写JavaScript代码

然后，在JavaScript中编写代码来实现添加元素和取值的功能。可以使用以下代码：

$(document).ready(function(){
  $("#add-card").click(function(){
    $("#card-container").append('<div class="card"><input type="text" name="title[]" /><textarea name="description[]"></textarea></div>');
  });

  $("#submit").click(function(){
    var titles = $("input[name='title[]']").map(function(){ return $(this).val(); }).get();
    var descriptions = $("textarea[name='description[]']").map(function(){ return $(this).val(); }).get();
    var data = { titles: titles, descriptions: descriptions };
    console.log(data);
  });
});

步骤三：解释代码

在上述代码中，当点击“添加卡片”按钮时，将在容器中添加一个ID为“card-container”的DIV元素，其中包含标题文本框和一个描述文本框，这些文本框的名称分别为“title[]”和“description[]”。方括号“[]”意味着表单域的值将以数组的形式提交。这意味着我们可以使用该数组来处理多个input或textarea元素的值。

当点击提交按钮时，使用JQuery选择器获取所有标题和描述文本框的值，并将它们分别存储在标题数组和描述数组中。然后，创建一个名为“data”的对象，并将标题数组和描述数组存储在其中。最后，使用console.log打印出data对象的内容。

示例说明

以下是两个使用动态添加控件的实际示例：

示例一：表单

假设你需要创建一个表单，其中包含多个问题，每个问题都包含一个名称和一个可选的描述。对于此需求，可以使用如下代码：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>动态添加控件并取值：表单示例</title>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" ></script>
  </head>
  <body>
    <form>
      <h1>调查问卷</h1>
      <button id="add-question">添加问题</button>
      <div id="question-container"></div>
      <button id="submit">提交</button>
    </form>
    <script>
      $(document).ready(function(){
        $("#add-question").click(function(){
          $("#question-container").append('<div class="question"><input type="text" name="question[]" /><textarea name="description[]"></textarea></div>');
        });

        $("#submit").click(function(){
          var questions = $("input[name='question[]']").map(function(){ return $(this).val(); }).get();
          var descriptions = $("textarea[name='description[]']").map(function(){ return $(this).val(); }).get();
          var data = { questions: questions, descriptions: descriptions };
          console.log(data);
        });
      });
    </script>
  </body>
</html>

示例二：卡片墙

假设你想创建一个卡片墙，其中包含多张卡片，每张卡片都有一个标题和一张图像。对于此需求，可以使用如下代码：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>动态添加控件并取值：卡片墙示例</title>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" ></script>
  </head>
  <body>
    <h1>卡片墙</h1>
    <button id="add-card">添加卡片</button>
    <div id="card-container"></div>
    <button id="submit">提交</button>
    <script>
      $(document).ready(function(){
        $("#add-card").click(function(){
          $("#card-container").append('<div class="card"><input type="text" name="title[]" /><input type="file" name="image[]" /></div>');
        });

        $("#submit").click(function(){
          var titles = $("input[name='title[]']").map(function(){ return $(this).val(); }).get();
          var images = $("input[name='image[]']").map(function(){ return $(this).val(); }).get();
          var data = { titles: titles, images: images };
          console.log(data);
        });
      });
    </script>
  </body>
</html>

在上述代码中，点击“添加卡片”按钮时，将在容器中添加一个卡片div，其中包含标题文本框和一个文件上传控件，用于上传图像。最后，当点击提交按钮时，标题数组和图像数组将被以相同的方式提取并打印出来。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：基于Jquery的动态添加控件并取值的实现代码 - Python技术站