添加更多带有多个选项 JQuery 的问题答案

【问题标题】：Add more question with multiple options JQuery添加更多带有多个选项 JQuery 的问题
【发布时间】：2019-11-12 12:40:58
【问题描述】：

我正在尝试添加带有多个选项的多个问题，有些问题有 2 个选项，有些问题有 3 个，依此类推。请指导我到底做错了什么。添加更多适用于外盒但内盒有问题。请检查并帮助我谢谢

<html lang="en">

<head>
    <title>Add more</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <style>
        .border {
            border: 1px solid #000;
            padding: 2rem;
            border-radius: 5px;
            margin-bottom: 5px;
            box-sizing: border-box;
            margin-top: 1rem;
        }

        .border.inner {
            border-color: red;
        }
    </style>
</head>

<body>

    <div class="container">
        <form action="action.php" method="post">
            <div class="long_box">
                <div class="border">
                    <div class="row">
                        <div class="col-md-12">
                            <label>Question</label>
                            <textarea class="form-control" name="question[]"></textarea>
                        </div>
                    </div>
                    <div class="border inner">
                        <div class="row">
                            <div class="long_box_inner">
                                <div class="col-md-12">
                                    <label>Question Option</label>
                                    <textarea class="form-control" name="option[]"></textarea>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <br>
                                <input type="submit" class="long_add_more_inner btn btn-success" name="Submit" value="Add More Inner">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <input type="submit" class="long_add_more btn btn-success" name="Submit" value="Add more">
            <input type="submit" class="btn btn-success" name="Submit" value="Submit">
        </form>
    </div>

    <script type="text/javascript">
        $(document).ready(function() {

            // Add More Box
            var long_max_fields = 10000;
            var long_wrapper = $(".long_box");
            var long_add_button = $(".long_add_more");

            var lng = 1;
            var lng_counter = 0;

            $(document).on('click', ".long_add_more", function(e) {
                e.preventDefault();
                if (lng < long_max_fields) {
                    lng++;
                    lng_counter++;
                    htmloutputlng = "";

                    htmloutputlng += `
<div class="long_ajax_box">

<div class="border">                      

<div class="row">

<div class="col-md-12">
<label>Question</label>
<textarea class="form-control" name="question[]"></textarea>
</div>                         

</div> 

<div class="border inner">

<div class="row">

<div class="col-md-12">
<label>Question Option</label>
<textarea class="form-control" name="option[]"></textarea>
</div>

<div class="col-md-12">
<br>
<input type="submit" class="long_add_more_inner btn btn-success" name="Submit" value="Add More Inner">
</div>

</div>

</div> 

<input type="submit" class="long_remove_button btn btn-danger" value="Remove">

</div>

</div>
`;

                    $(long_wrapper).append(htmloutputlng);

                }

            });

            $(long_wrapper).on("click", ".long_remove_button", function(e) {

                e.preventDefault();

                $(this).closest('div.long_ajax_box').remove();
                lng--;

            });

            // Add More Box Inner
            var long_inner_max_fields = 10;
            var long_inner_wrapper = $(".long_box_inner");
            var long_inner_add_button = $(".long_add_more_inner");

            var lng_inner = 1;
            var lng_inner_counter = 0;

            $(document).on('click', ".long_add_more_inner", function(e) {
                e.preventDefault();
                if (lng_inner < long_inner_max_fields) {
                    lng_inner++;
                    lng_inner_counter++;
                    htmloutputlng_inner = "";

                    htmloutputlng_inner += `

<div class="long_box_inner_ajax">

<div class="col-md-12">
<label>Question Option</label>
<textarea class="form-control" name="option[]"></textarea>
</div>

<div class="col-md-12"><br>
<input type="submit" class="long_inner_remove_button btn btn-danger" value="Remove">
</div>

</div>

`;

                    $(long_inner_wrapper).append(htmloutputlng_inner);

                }

            });

            $(long_inner_wrapper).on("click", ".long_inner_remove_button", function(e) {

                e.preventDefault();

                $(this).closest('div.long_box_inner_ajax').remove();
                lng_inner--;

            });

        });
    </script>

</body>

</html>

【问题讨论】：

请格式化您的不可读代码htmlformatter.com
可以考虑使用数组来存储字段
如果您看到我的代码，我已经在使用数组，但我担心的是带有 jquery 的 html 流。如果您运行我的代码并进行测试，您将明白我的意思。谢谢
我在文件中看不到任何数组。您正在设置输入的name 属性。

标签： javascript php jquery codeigniter

【解决方案1】：

你可以改变你的

$(long_inner_wrapper).append(htmloutputlng_inner);

到

$(this).parent().siblings(long_inner_wrapper).append(htmloutputlng_inner);

inner 选项总是添加到第一个 .long_inner_wrapper 类匹配元素。您必须使其动态化并始终添加到最近的.long_inner_wrapper。

另外，你需要改变你的

$(long_inner_wrapper).on("click", ".long_inner_remove_button", function(e) {

到

$(document).on("click", ".long_inner_remove_button", function(e) {

否则，您的内部删除按钮将不起作用。

奖金：

我已对您的代码进行了格式化，使其看起来更漂亮。

<html lang="en">
  <head>
    <title>Add more</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
    />
    <style>
      .border {
        border: 1px solid #000;
        padding: 2rem;
        border-radius: 5px;
        margin-bottom: 5px;
        box-sizing: border-box;
        margin-top: 1rem;
      }

      .border.inner {
        border-color: red;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <form action="action.php" method="post">
        <div class="long_box">
          <div class="border">
            <div class="row">
              <div class="col-md-12">
                <label>Question</label>
                <textarea class="form-control" name="question[]"></textarea>
              </div>
            </div>
            <div class="border inner">
              <div class="row">
                <div class="long_box_inner">
                  <div class="col-md-12">
                    <label>Question Option</label>
                    <textarea class="form-control" name="option[]"></textarea>
                  </div>
                </div>
                <div class="col-md-12">
                  <br />
                  <input
                    type="submit"
                    class="long_add_more_inner btn btn-success"
                    name="Submit"
                    value="Add More Inner"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
        <input
          type="submit"
          class="long_add_more btn btn-success"
          name="Submit"
          value="Add more"
        />
        <input
          type="submit"
          class="btn btn-success"
          name="Submit"
          value="Submit"
        />
      </form>
    </div>

    <script type="text/javascript">
      $(document).ready(function() {
        // Add More Box
        var long_max_fields = 10000;
        var long_wrapper = $(".long_box");
        var long_add_button = $(".long_add_more");

        var lng = 1;
        var lng_counter = 0;

        $(document).on("click", ".long_add_more", function(e) {
          e.preventDefault();
          if (lng < long_max_fields) {
            lng++;
            lng_counter++;
            htmloutputlng = "";

            htmloutputlng += `
            <div class="long_ajax_box">
                <div class="border">
                    <div class="row">
                    <div class="col-md-12">
                        <label>Question</label>
                        <textarea class="form-control" name="question[]"></textarea>
                    </div>
                    </div>

                    <div class="border inner">
                    <div class="row">
                        <div class="long_box_inner">
                        <label>Question Option</label>
                        <textarea class="form-control" name="option[]"></textarea>
                        </div>
                        <div class="col-md-12">
                        <br />
                        <input
                            type="submit"
                            class="long_add_more_inner btn btn-success"
                            name="Submit"
                            value="Add More Inner"
                        />
                        </div>
                    </div>
                    </div>
                    <input
                        type="submit"
                        class="long_remove_button btn btn-danger"
                        value="Remove"
                    />
                </div>
            </div>
            `;
            $(long_wrapper).append(htmloutputlng);
          }
        });
        $(long_wrapper).on("click", ".long_remove_button", function(e) {
          e.preventDefault();
          $(this).closest("div.long_ajax_box").remove();
          lng--;
        });

        // Add More Box Inner
        var long_inner_max_fields = 10;
        var long_inner_wrapper = $(".long_box_inner");
        var long_inner_add_button = $(".long_add_more_inner");

        var lng_inner = 1;
        var lng_inner_counter = 0;

        $(document).on("click", ".long_add_more_inner", function(e) {
          e.preventDefault();
          if (lng_inner < long_inner_max_fields) {
            lng_inner++;
            lng_inner_counter++;
            htmloutputlng_inner = "";
            htmloutputlng_inner += `
            <div class="long_box_inner_ajax">
                <div class="col-md-12">
                    <label>Question Option</label>
                    <textarea class="form-control" name="option[]"></textarea>
                </div>

                <div class="col-md-12">
                    <br />
                    <input
                        type="submit"
                        class="long_inner_remove_button btn btn-danger"
                        value="Remove"
                    />
                </div>
            </div>
            `;
            $(this).parent().siblings(long_inner_wrapper).append(htmloutputlng_inner);
          }
        });

        $(document).on("click", ".long_inner_remove_button", function(e) {
          e.preventDefault();
          $(this).closest("div.long_box_inner_ajax").remove();
          lng_inner--;
        });
      });
    </script>
  </body>
</html>

【讨论】：

谢谢@dev_junwen。请您再解释一下如何将这些选项字段分别传递到下一页，以便我可以将它们插入数据库。现在所有这些都在同一个数组中。