![](/img/trans.png)
[英]fine-uploader - how to use in combination with other input fields?
[英]Use dynamic input fields in combination with php foreach
我正在尝试构建一个包含几个任务列表的页面。 对于这部分,我想使用动态输入字段。 表单由 foreach 循环,它查看用户数量。
现在的问题是标签(添加、删除和重置)除了在“第一次循环”之外不起作用。 当我单击第一个循环值时,将在所有“循环”中添加一个字段,而不仅仅是第一个循环。
我的 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;
});
});
这里有很多事情要解决。
id
vs 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
。 我们必须通过使用它们的类.field
来将计数限制为文本字段:
var i = $('input.field').size() + 1;
因为你使用appendTo('.inputs');
,您向所有项目添加一个新文本字段,因为它们每个都具有该元素。 您必须限制对当前项目的添加。
为了实现这一点,我们使用this
关键字,它将返回触发事件的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
。
我们使用:gt()
选择器选择除第一个之外的所有字段,从i
减去返回字段的数量,然后删除这些字段。
var fields = $(this).parent().find('.field:gt(0)');
i -= fields.length;
fields.remove();
此JSFiddle中可用的演示。
我也不太确定变量i
的用途,由于其全局性质, i
会立即放弃它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.