如何修改jQuery代码实现动态添加问题和答案双输入框？

没问题，我帮你把原来的单个输入框改成问题+答案的成对输入组，同时保证PHP能正常获取到对应的两个数组（questions[]和answers[]），每个索引位置的问题和答案是一一对应的。下面是完整的实现步骤和代码：

1. 调整HTML基础结构 #

首先把原来的单个输入框改成一个包含「问题输入框」和「答案输入框」的容器，同时保留添加按钮：

<form method="post" action="your-php-file.php">
  <!-- 初始的问题-答案组 -->
  <div class="input-group">
    <input type="text" name="questions[]" placeholder="输入问题" required>
    <input type="text" name="answers[]" placeholder="输入答案" required>
    <button type="button" class="remove-btn">删除</button>
  </div>

  <!-- 添加按钮 -->
  <button type="button" id="add-more">添加更多问题</button>
  
  <button type="submit">提交</button>
</form>

这里用div.input-group包裹每一组输入，方便后续克隆/删除；两个输入框的name分别设为questions[]和answers[]，这样PHP端就能得到两个顺序对应的数组。

2. 编写jQuery逻辑实现动态添加/删除 #

接下来修改你的jQuery代码，实现点击「添加更多问题」按钮时，克隆一个新的输入组，同时清空输入值；另外给每个组加上删除功能：

$(document).ready(function() {
  // 添加新的问题-答案组
  $('#add-more').click(function() {
    // 克隆初始的输入组，注意要深克隆（true参数）
    const newGroup = $('.input-group:first').clone(true);
    // 清空克隆出来的输入框内容
    newGroup.find('input').val('');
    // 把新组插入到添加按钮前面
    newGroup.insertBefore('#add-more');
  });

  // 删除当前的问题-答案组（注意用事件委托，因为动态生成的元素需要绑定事件）
  $(document).on('click', '.remove-btn', function() {
    // 至少保留一个初始组
    if ($('.input-group').length > 1) {
      $(this).closest('.input-group').remove();
    } else {
      alert('至少要保留一个问题组哦');
    }
  });
});

关键细节说明： #

• 使用clone(true)可以连带着克隆元素上绑定的事件（比如删除按钮的点击事件），不用重复绑定。
• 用事件委托$(document).on('click', '.remove-btn', ...)处理动态生成的删除按钮，确保点击有效。
• 限制至少保留一个输入组，避免表单空提交。

3. PHP端获取数据的示例 #

提交表单后，你可以在PHP文件中这样获取对应的问题和答案数组：

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  // 获取问题数组和答案数组
  $questions = $_POST['questions'] ?? [];
  $answers = $_POST['answers'] ?? [];

  // 遍历输出每一组问题和答案（确保索引对应）
  foreach ($questions as $index => $question) {
    $answer = $answers[$index] ?? '未填写答案';
    echo "问题{$index+1}：{$question}<br>";
    echo "答案{$index+1}：{$answer}<br><br>";
  }

  // 也可以把数据存到数据库，比如：
  // foreach ($questions as $index => $question) {
  //   $answer = $answers[$index];
  //   // 执行INSERT语句，把question和answer存入表中
  // }
}
?>

这样就能保证每个问题和对应的答案一一对应，完美适配你的需求。

内容的提问来源于stack exchange，提问作者uppermost