Question

我正在为我的家族开发一个模块，用户可以在其中自动生成BBCode格式的文本。由于我们团队中有多个组，我希望它们也由<h1>标签分隔对于来自$groups的每个组，应该有单独数量的克隆。

这是我的HTML + JS。而不是<h1>，可能是PHP数组中$groups=array("Group 1", "Group 2",...)

组的名称

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这就是它目前的样子（但用德语单词）

PS：在弃权之前，请考虑写下我的问题有什么问题。提前致谢

Answer 1

var wrapper = $('.field_wrapper');
...
$(wrapper).append(fieldHTML);

包装器包含所有带有类＆＃34; field_wrapper＆＃34;的元素。如果向其添加元素，则会将其添加到具有此类的所有元素中。

您需要为点击的+按钮找到正确的包装div

$(addButton).click(function(){ 
        $(this).parents(".field_wrapper").append(fieldHTML); 
});

Answer 2

问题有点令人困惑，但有几点需要注意，

目前，您正在使用数组来解析服务器上的数据，但根本没有将数组分组在一起，请尝试以下代码作为起点。

<?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>

基于PHP-Array动态附加表单

2 个答案: