Question

我有一个带有表单的php页面，用于将人员添加到一个小组中。

对于每个被添加的人，都有一个包含多个表单元素的元素，每个元素都根据人的编号命名。例如：

<div class="user">
<input type="text" name="user1LastName" />
...
</div>
<div class="user">
<input type="text" name="user2LastName" />
...
</div>

对于数据库中的每个人，php页面都会填充表单部分。

要添加其他人，用户可以单击“+”图标，此时页面使用jQuery动态填充新的。为此，我只是将新的div html附加到现有表单。这意味着javascript页面包含所有相同的html标记（要附加），作为php页面。

这似乎是不必要的代码重复。每当我在php页面中更改某些内容时，我也必须在javascript代码中进行更改。

是否有任何避免此类代码重复的通用方法？我唯一能想到的是使用jQuery从已经存在的div中获取html。但在这种情况下，用户n的表单字段的值将显示在用户n + 1的新代码中。

感谢。

Answer 1

Capisci：）？

<div class="user" id="user_1">
<input type="hidden" name="uid[0]" value="1"/>
<input type="text" name="lastname[0]" value="user480029"/>
...
</div>

<div class="user" id="user_2">
<input type="hidden" name="uid[1]" value="2"/>
<input type="text" name="lastname[1]" value="arto"/>
...
</div>

现在添加另一个字段时......

<div class="user" id="user_3943094103945">
<input type="hidden" name="uid[]" value=""/>
<input type="text" name="lastname[]" value=""/>
...
</div>

然后你通过$_POST[]迭代你做你想做的事。

你有.user上的用户ID，所以你删除用户你可以删除那部分HTML（这更适合用户体验），更重要的是，你没有数百个变量，只有几个数组，你可以迭代一个循环。希望你明白这一点。欢呼声。

Answer 2

php代码应该为javascript提供一个“原型”，可以使用javascript进行修改。这样，即使没有任何用户，javascript仍然可以工作。这个例子显然缺少很多代码（比如表单），但它应该给你一个想法。我没有对它进行测试，因为我认为你无论如何都要进行大量修改。

 <script type="application/x-javascript">
  addEventListener("load",function(){
   document.getElementById("add-user").addEventListener("click",function(){
    var node=document.getElementById("prototype-container").getElementsByClassName("users")[0].cloneNode(true),n=document.getElementById("add-user").getElementsByClassName("users").length,list=node.getElementsByTagName("input");
    document.getElementById("user-list").appendChild(node);
    node.id="users_"+(n+1);
    for(var i=0;i<list.length;++i)
     list[i].name&&(list[i].name+="["+n+"]");
   },false);
  },false);
 </script>
</head>
<body>
 <div id="prototype-container">
  <? /* print out a div without any information in it */ ?>
 </div>
 <div id="user-list">
  <? /* print out divs with some infomation in them */ ?>
 </div>
 <button id="add-user">add a user</button>

避免在php和javascript之间重复代码

2 个答案: