将动态输入字段与 php foreach 结合使用

Question

我正在尝试构建一个包含一些任务列表的页面。对于这部分，我想使用动态输入字段。该表单由 foreach 循环，它查看用户数量。

现在的问题是除了 "first loop" 之外，标签（添加、删除和重置）不起作用。当我单击第一个循环值时，将在所有 "loops" 处添加一个字段，而不仅仅是第一个循环。

我的PHP代码：

<?php 
    foreach (glob(/*user as file*/) as $filename) {
        echo '
            <div class="col-md-4 taskblock">
                <img class="taskimage" src="../../../'.$filename.'"/>
                <div class="name">User</div>
                <div class="dynamic-form">

                <a id="add">Add</a> | <a id="remove">Remove</a>  | <a id="reset">Reset</a>  

                    <form>
                    <div class="inputs">
                    <div><input name="dynamic[]" class="field" value="1" type="text"></div>
                    </div>
                    <input name="submit" class="submit" value="Submit" type="button">
                    </form>
                    </div>

                </div>
            ';
    }
?>

还有我的脚本：

$(document).ready(function(){

    var i = $('input').size() + 1;

    $('#add').click(function() {
        $('<div><input type="text" class="field" name="dynamic[]" value="' + i + '" /></div>').appendTo('.inputs');
        i++;
    });

    $('#remove').click(function() {
        if(i > 1) {
            $('.field:last').remove();
            i--;
        }
    });

    $('#reset').click(function() {
        while(i > 2) {
        $('.field:last').remove();
        i--;
        }
    });

    // here's our click function for when the forms submitted

    $('.submit').click(function(){

        var answers = [];
        $.each($('.field'), function() {
            answers.push($(this).val());
        });

        if(answers.length == 0) {
            answers = "none";
        }

        alert(answers);

        return false;

    });

});

Answer 1

前言

这里有很多问题要解决。

`id` 对比 `class`

id 属性在一个文档中必须是唯一的。这就是 add、remove 和 reset 只影响第一项的原因。我们必须将它们更改为 class.

<a class="add">Add</a> | <a class="remove">Remove</a>  | <a class="reset">Reset</a>

计算字段

因为您使用的是 var i = $('input').size() + 1;，所以您实际上同时计算了文本字段和提交按钮。因此，如果您有 3 个项目并添加一个文本字段，它将填充值 7 而不是 4。我们必须通过使用 class .field:

来限制对文本字段的计数

var i = $('input.field').size() + 1;

仅针对当前项目

因为您使用 appendTo('.inputs');，所以您向所有项目添加了一个新的文本字段，因为它们每个都有该元素。您必须限制添加到当前项目。

为此，我们使用 this 关键字，它将 return 触发事件的 add 元素。从那里，我们到达父元素，在其中寻找 .inputs 元素，然后我们将新元素注入其中。

$(this).parent().find('.inputs')
    .append('<div><input type="text" class="field" name="dynamic[]" value="' 
    + i + '" /></div>');

相同的基本逻辑必须应用于 remove，但出于下一部分中解释的原因，我们将做一些稍微不同的事情：

var field = $(this).parent().find('.field:gt(0):last')
i -= field.length;
field.remove();

更好的重置

因为变量 i 对所有项目都是通用的，所以它的值总是大于在任何项目中找到的文本字段数。使用重置只会删除所有文本字段。相反，我们必须从当前项目中删除除第一个字段之外的所有字段，并通过减去我们删除的字段数来更改 i。

我们 select 除了第一个字段之外的所有字段使用 :gt() select 或者，从 i 中减去 returned 字段的数量，然后删除字段。

var fields = $(this).parent().find('.field:gt(0)');
i -= fields.length;
fields.remove();

结语

此 JSFiddle 中提供了一个演示。

我也不太确定变量 i 的用途，由于它的全局性质，我会立即放弃它。

将动态输入字段与 php foreach 结合使用

Use dynamic input fields in combination with php foreach

javascript

php

foreach

jquery

dynamic

前言

`id` 对比 `class`

计算字段

仅针对当前项目

更好的重置

结语

将动态输入字段与 php foreach 结合使用

Use dynamic input fields in combination with php foreach

javascript

php

foreach

jquery

dynamic

前言

id 对比 class

计算字段

仅针对当前项目

更好的重置

结语

`id` 对比 `class`