个人中心
gpt4 book ai didi

jquery - 使用 jQuery 提交数组的动态 HTML

转载 作者：行者123 更新时间：2023-12-01 00:28:40 26 4
gpt4 key购买 nike

不太确定如何命名这个问题，但这是我遇到的问题:

我需要能够通过 HTML 表单提交数组或数据链接列表。由于这个数组可能是可变长度的，我有两个选择:

  • 使用某种形式的分隔符(例如，列表中的逗号分隔项)
  • 当需要添加新项目时，动态生成多个输入(每个数组项目)

    • 我想追求第二种选择，虽然我觉得由于这个特定的项目会有很多这样的“数组输入”，我应该创建一个 jQuery 插件，以便我可以更容易地将这个功能实现到 future 的表单中。

    在我处理这个问题时，我还一直在为多种输入类型、选择、选择倍数(通过分隔符)和链接输入(例如 - 有两个文本输入“名字”和“姓氏”添加功能，它们必须成对提交)

    我有一个关于我认为它应该如何工作的基本布局: 
    (function($) { // Self-calling anonymous function to avoid namespace collisions or compatibility issues

        $.fn.dynamicList = function( options ) { // jQuery plugin definition

            /* Set up default options here */
            defaults = {
                option1: "value1",
                option2: "value2"
            };
            var options = $.extend( defaults, options );

            /* Step 1. Add a jQuery-UI plus icon to the DOM */
            /* Note: I have an option to specify where this icon should go in the DOM. It defaults right after the last input */
            plus = $("<span>").addClass( 'jquery-ui-classes' );
            this.last().after( plus );

            /* Step 2. Add a table to the DOM for displaying added values */
            /* Note: I have an option to specify where this table should go in the DOM. It defaults right after the plus icon */
            plus.after( table );

            /* Step 3. Add a handler for our plus button */
            this.delegate( plus, 'click', function() {
                /* Read the inputs, add their values to the table, empty the inputs */
                /* Also, the last column of the table contains a minus button */
                /* This is where I THOUGHT my first issue was.... */
                minus = $("<span>").addClass( 'jquery-ui-classes' );
                table.append( row ).append( minus );
            });

            /* Step 4. Add a handler for our minus button */
            /* Since the minus is created within the plus handler we can't use "minus" here */
            /* Instead I use a class name to locate it */
            this.delegate( '.jquery-ui-minus-class', 'click', function() {
                /* Remove the relevant row from the table */
                $(this).parents('tr').remove();
            });

            /* Step 5. Add our submit handler */
            this.parents('form').first().submit(function() {
                /* We want all of the data in the table to be submitted with the form */
                /* Therefore we create an input per cell and name it accordingly */
                /* The name is just the name of the original input plus "[]" to make it an array */
                /* This is where I thought my second problem was */
            });

            return this; // Maintain chain-ability

        };

    )(jQuery);

    在您希望用动态列表替换的输入上调用此代码。如果您选择了多个输入，那么它们将成为链接数据的列表(例如名字和姓氏示例)。如何调用它的示例如下: 
    <html>
        <head>
            <!-- Include jQuery and my dynamic list library here -->
            <script>
                $('#fn,#ln').dynamicList();
            </script>
        </head>
        <body>
            <form>
                <input id="fn" name="first_name" />
                <input id="ln" name="last_name" />
            </form>
        </body>
    </html>

    这将创建一个动态列表，您可以在其中输入名字和姓氏，然后单击加号按钮(现在根据您的 CSS 规则位于姓氏输入的右侧或下方)，它将向包含一列中的名字，另一列中的姓氏，最后一个减号按钮。您可以继续输入名称并点击此加号按钮，表格将无限向下扩展。提交表单(通过提交按钮或任何其他方法)后，表格单元格应成为输入。

    我认为我会遇到的第一个问题是在 plus 处理程序中。由于我在通过单击加号按钮调用的函数中，“this”关键字现在指的是加号图标的 DOM 元素。我无法获取输入的值以将它们添加到表中。我提出的一个解决方案是创建一个全局变量，它是动态列表函数被调用的对象的副本，如下所示: 
        .
        .
        .
            /* Step 2. Add a table to the DOM for displaying added values */
            /* Note: I have an option to specify where this table should go in the DOM. It defaults right after the plus icon */
            plus.after( table );

            var dynamicList = this;

            /* Step 3. Add a handler for our plus button */
            this.delegate( plus, 'click', function() {
                /* Read the inputs, add their values to the table, empty the inputs */
                /* Also, the last column of the table contains a minus button */
                /* This is where I THOUGHT my first issue was.... */

                for( i = 0; i < dynamicList.length; i++ ) {
                    // dynamicList.get(i) will give us each input in order
                }

                minus = $("<span>").addClass( 'jquery-ui-classes' );
                table.append( row ).append( minus );
            });
        .
        .
        .

    我对此的担忧是，如果我实例化多个动态列表，它们将相互覆盖。这是真的？如果是这样，我该如何克服？

    我认为我会遇到的第二个问题是类似的。提交表单后，我需要找到表格以获取要提交的值并找到输入以获取应提交的名称。

    但是，在尝试自己尝试修复代码时，我比预期的要早得多地遇到了问题。 
    Uncaught TypeError: Object [object Object] has no method 'replace'
    jquery-1.6.2.min.js:16
    f.each.f.fn.(anonymous function)     jquery-1.6.2.min.js:17
    f.fn.extend.delegate     jquery-1.6.2.min.js:17
    $.fn.dynamicList     jquery.dynamicList.js:76
    (anonymous function)      test.php:16
    f.extend._Deferred.e.resolveWith     jquery-1.6.2.min.js:16
    e.extend.ready     jquery-1.6.2.min.js:16
    c.addEventListener.B     jquery-1.6.2.min.js:16

    查看我的动态列表代码的第 76 行，它是以下行: 
    this.delegate( plus, 'click', function() {

    我可以不打电话吗 .delegate()因为“this”指的是多个 jQuery 对象？或者我可以不打电话 .delegate()因为“this”不是加号图标的父元素？一旦这个问题得到解决，我该如何解决我的另外两个问题？

    编辑 -

    我修改了标题，并在第 76 行找到了解决我的问题的方法。我不确定如何 .delegate()有效，因为起初我尝试过: 
    this.first().parent().delegate( plus, 'click', function() {

    它仍然生我的气。然后我意识到我可以只使用 .click()功能代替(我有点傻) 
    plus.click( function() {

    我在每行创建减号按钮时使用了类似的逻辑。我加了 minus.click()在创建减号按钮之后，在将其插入到 DOM 之前，省去了我使用 .delegate() 的麻烦代码中的任何地方。

    仍然不确定如何从加号处理程序中的输入字段获取值，因为此时“this”关键字已被覆盖以引用加号按钮，而不是我的输入字段。

    最佳答案

    I modified the title and I found a solution to my problem on line 76. I'm not sure exactly how .delegate() works, because at first I tried:


    this.first().parent().delegate( plus, 'click', function() {

    and it was still upset at me. Then I realized that I could just use the .click() function instead (I kinda goofed)


    plus.click( function() {

    I used similar logic when creating the minus button per row. I added minus.click() after creating the minus button and before inserting it into the DOM, saving me the trouble of using .delegate() anywhere in the code.

    关于jquery - 使用 jQuery 提交数组的动态 HTML，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9106622/

    26 4 0
    文章推荐： jquery - 将文本(纯文本)从tinymce复制到textarea
    文章推荐： python - 在 pandas 数据框中，如何对字符串列的值进行正则表达式替换
    文章推荐： python - 绘制时间太接近
    文章推荐： jQuery 简单的下拉菜单？
    行者123
    个人简介

    我是一名优秀的程序员,十分优秀！

    滴滴打车优惠券免费领取
    滴滴打车优惠券
    全站热门文章
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com