使用 Dojo 1.5 操作 div id

Question

我最近在我的公司接手了一个基于网络的产品。它最初是使用在 Catalyst/Template Toolkit 之上运行的旧版 Dojo 开发的（因此它全部提交给后端的 Perl）。从那以后，我已经采取措施至少更新到 Dojo 1.5

具体来说，我现在要解决的问题与 div id 有关。这是一个表单页面，起初有一个组合框、一个下拉选择和一个文本框。为了简洁起见，我将压缩这个...... HTML 看起来像这样......

<div id="actions">
      <div id="prelim_actions_1_div">
   Variable: <input type="text" value="" 
                class=lighttext size=50 
                id="prelim_actions_xvar_1" 
                name="prelim_actions_xvar_1"/> 

   <a href="javascript:void();" title="Delete" 
      onclick="delete_section('prelim_actions_1_div')">
      <img src="http://localhost:3000/static/images/16-square-red-delete.png"/></a>

  <a href="javascript:void();" title="Insert Below" 
     onclick="add_action_below('prelim_actions', 'prelim_actions_1_div')">
     <img src="http://localhost:3000/static/images/16-em-down.png"/></a>

  </div>
</div>

第一个 Javascript href 允许您删除文本框 (title="Delete")，第二个允许您添加另一个成功增加 div id 的文本框。在上面的例子中

<div id="actions"> 

将成功嵌套在其中...

<div id="prelim_actions_1_div">
 ........
 ........
</div>
<div id="prelim_actions_2_div">
....
....
</div>

问题是 javascript 中的该当删除函数。我发现，通过像真实用户一样添加和删除的各种组合，通过尝试注册已经注册的 div 并成功写入多个同名 div id，在 Firebug 中引发错误是可能的。

所以我的问题是，我不是在找人来帮我打出解决方案（但我确实需要尝试学习这一点），是否有更简单的方法来实现这一点。这是动态添加和删除文本框的能力，并确保在点击提交按钮之前每个文本框都有一个唯一的 div id（和名称）。

那里的任何 dojo/javascript 专业人士有任何智慧之言或链接可以帮助我指出正确的方向吗？ 珍妮

Answer 1

很大程度上取决于delete_section 和add_action_below 现在的工作方式。我建议你让delete_section 变得非常愚蠢——只是盲目地删除传入的 div。在执行add_action_below 函数时，请执行以下操作：

//figure out the next available spot
var i = 1;
while(dojo.query('#prelim_actions_'+i).length){
  i++;
}

console.log('available id: prelim_actions_'+i);
//create div contents
//append after clicked section

我不确定您的应用程序的后端是如何工作的，但很可能您只需通过参数并找到名为 prelim_actions_xvar_.* 的参数就可以了。