我正在为我的部落开发一个模块，用户可以在其中自动生成BBCode格式的文本。由于我们团队中有多个小组，我希望他们也用<h1>标签分开对于来自$groups的每个组，应该有单独数量的克隆。
这是我的HTML+JS。应该有来自PHP数组$groups=array("Group 1", "Group 2",...) 的组名称，而不是<h1>
http://jsfiddle.net/yq2jjn9z/1/（form.js）
我的index.php现在看起来是这样的：
<?php
[...] //some DB stuff
<script>js/form.js</script>
<form name="groups" action="" method="post">
<?php foreach($groups as $key): ?>
<div class="field_wrapper">
<div>
<h2><?php echo($key)?></h2>
<input type="text" name="field_rank[]" placeholder="Rank" value=""/>
<input type="text" name="field_name[]" placeholder="Name" value=""/>
<a href="javascript:void(0);" class="add_button" title="Add Row">+</a>
</div>
</div>
<?php endforeach; ?>
<input type="submit" name="submit" value="Submit"/>
</form>
?>
遗憾的是，它克隆了所有的东西，不仅仅是在选定的组中。但是"删除"按钮完全按照预期工作。我错过什么了吗？
另外，我可以在不混合PHP和HTML的情况下完成这项工作吗？
有什么想法吗，我该如何改进？
编辑：http://techtreedev.de/muster.php这就是它现在的样子（但用德语单词）
附言：在投否决票之前，请考虑写下我的问题出了什么问题。提前感谢
var wrapper = $('.field_wrapper');
...
$(wrapper).append(fieldHTML);
包装器包含类为"field_wrapper"的所有元素。如果向其中添加一个元素，则该元素将添加到此类的所有元素中。
您需要为点击的+按钮找到正确的包装器div
$(addButton).click(function(){
$(this).parents(".field_wrapper").append(fieldHTML);
});
这个问题有点令人困惑，但需要注意的是，
目前，您正在使用一个数组来解析服务器上的数据，但根本没有将数组分组在一起，请尝试以下代码作为起点。
<?php $groups = array("group 1","group 2"); ?>
<form name="groups" action="" method="post">
<?php foreach($groups as $key=>$text): ?>
<div class="field_wrapper">
<div>
<h2><?php echo($text)?></h2>
<div class="rowDiv_<?= $key ?>">
<input type="text" name="field_rank[<?= $key ?>][0][Rank]" placeholder="Rank" value=""/>
<input type="text" name="field_name[<?= $key ?>][0][Name]" placeholder="Name" value=""/>
<a href="javascript:void(0);" class="add_button" data-group-key="<?= $key ?>" data-rowCount="0" title="Add Row">+</a>
</div>
</div>
</div>
<?php endforeach; ?>
<input type="submit" name="submit" value="Submit"/>
</form>
<script>
$("body").on("click",".add_button",function(){
myKey = $(this).attr("data-group-key");
rowCount = $(".rowDiv_"+myKey+":last a").attr("data-rowCount");
rowCount = parseInt(rowCount) + 1;
html = '<div class="rowDiv_'+myKey+'">';
html += '<input type="text" name="field_rank['+myKey+']['+rowCount+'][Rank]" placeholder="Rank" value=""/> ';
html += '<input type="text" name="field_name['+myKey+']['+rowCount+'][Name]" placeholder="Name" value=""/> ';
html += '<a href="javascript:void(0);" class="remove_button" data-group-key="'+myKey+'" data-rowCount="'+rowCount+'" title="Remove Row">-</a>';
html += '</div>';
$(this).parent().parent().append(html);
})
$("body").on("click",".remove_button",function(){
$(this).parent().remove();
})
</script>
您需要为每个组制作一个唯一的包装，如
<script>js/form.js</script>
<form name="groups" action="" method="post">
<?php foreach($groups as $key): ?>
<div class="field_wrapper_<?php echo $key;?>">
<div>
<h2><?php echo($key)?></h2>
<input type="text" name="field_rank[]" placeholder="Rank" value=""/>
<input type="text" name="field_name[]" placeholder="Name" value=""/>
<a href="javascript:void(0);" class="add_button" onclick="append_more('<?php echo $key;?>')" title="Add Row">+</a>
</div>
</div>
<?php endforeach; ?>
<input type="submit" name="submit" value="Submit"/>
</form>
并将此代码放入您的JS文件中
<script>
function append_more(key)
{
var wrapper = $('.field_wrapper_'+key);
var fieldHTML = '<div><input type="text" name="field_rank[]" placeholder="Rang" value=""/> <input type="text" name="field_name[]" placeholder="Name" value=""/> <a href="javascript:void(0);" class="remove_button" title="Feld entfernen">-</a></div>';
$(wrapper).append(fieldHTML);
}
</script>