Javascript 没有ID冲突的HTML重复表单

我有一个表单设置，显示为jquery UI对话框。许多元素都有与之关联的javascript，用于操纵表单上的其他对象。例如，我可能会有如下内容：

$('#empNumber').change(function(){
    $.getJSON('getEmpInfo',{...},function(response){
        $('#empName').val(response.empName);
        ...
    }
})

当然，输入员工编号时，这将填充员工姓名和其他信息

我现在想在页面上的第二个位置直观地显示这个相同的表单，它是一个不同的选项卡，而不是对话框的访问位置，但就HTML而言，它只是一个不同的div，作为不同表单的子级，而不是它本身

考虑到一切都是模板，我的第一个想法就是将这个表单包含在我需要它的第二个位置。但现在我有一个问题：所有的id都是重复的。这不仅是不好的做法，而且破坏了上面的代码

---

因此，基本上，我需要两份表单和相关javascript的副本。一个显示为独立对话框，另一个显示为另一个对象的子对象。当然，我可以更改所有的ID，但是我还必须有两份代码副本，这充其量也会很烦人。那么最好的解决方案是什么呢？

您可以将它们放在具有唯一id的div中，然后使用css选择器为子体唯一地选择它们

说我有

<div id="form1"> 
<input class = "empNumber" />
</div>
<div id="form2"> 
<input class = "empNumber" />
</div>

---

然后使用$'form1.empNumber'选择第一个。

您可以将它们放在具有唯一id的div中，然后使用css选择器为子体唯一地选择它们

说我有

<div id="form1"> 
<input class = "empNumber" />
</div>
<div id="form2"> 
<input class = "empNumber" />
</div>

---

然后使用$'form1.empNumber'选择第一个。

如果您希望在同一页上有多个ID，则不应使用ID。改用类：

$('.empNumber').change(function(){
    $.getJSON('getEmpInfo',{...},function(response){
        $('.empName').val(response.empName);
        ...
    }
})

此外，您还需要修改代码，以便所有选择器都是独立的，并且不会在页面的其他部分引起问题。通常我会这样做：

var initializeForm = function($el) {
  // all selectors will be within the `.myFirstForm` or `.mySecondForm` wrappers
  $el.find('.empNumber').change(function(){
      $.getJSON('getEmpInfo',{...},function(response){
          $el.find('.empName').val(response.empName);
          ...
      }
  });
}

initializeForm($('#myFirstForm'));
initializeForm($('#mySecondForm'));

---

如果希望在同一页上有多个ID，就不应该使用ID。改用类：

$('.empNumber').change(function(){
    $.getJSON('getEmpInfo',{...},function(response){
        $('.empName').val(response.empName);
        ...
    }
})

此外，您还需要修改代码，以便所有选择器都是独立的，并且不会在页面的其他部分引起问题。通常我会这样做：

var initializeForm = function($el) {
  // all selectors will be within the `.myFirstForm` or `.mySecondForm` wrappers
  $el.find('.empNumber').change(function(){
      $.getJSON('getEmpInfo',{...},function(response){
          $el.find('.empName').val(response.empName);
          ...
      }
  });
}

initializeForm($('#myFirstForm'));
initializeForm($('#mySecondForm'));

---

使用类而不是id属性。但是您仍然需要注意一些关于提交和验证的代码，这取决于它的设计方式。请使用class而不是id属性。但是你仍然需要注意一些关于提交和验证的代码，这取决于它是如何设计的。这是有道理的，但是我如何避免需要两个javascript副本来填充正确的一个呢？对字符串也使用一个变量？使用变量连接第一部分。这取决于完整的用例。用例是，此表单可以从同一页面上的两个不同位置选项卡中的任意一个进行填写。根据用户当前查看的选项卡，他们需要填写此表单，或者此表单加上一些附加数据。因此，我会显示此表单的对话框，或者在div中嵌入此表单的附加表单。这有帮助吗？ID必须是唯一的，才能成为有效的HTML，因此这不会验证，并且可能会混淆屏幕阅读器或其他可访问性方法和测试框架。同意@blm，可以用类替换输入，然后应用该逻辑。编辑我的回答是有意义的，但是如何避免需要两个javascript副本来填充正确的一个呢？还要为字符串使用一个变量？使用变量连接第一部分。这取决于完整的用例。用例是，此表单可以从同一页面上的两个不同位置选项卡中的任意一个进行填写。根据用户当前查看的选项卡，他们需要填写此表单，或者此表单加上一些附加数据。因此，我会显示此表单的对话框，或者在div中嵌入此表单的附加表单。这有帮助吗？ID必须是唯一的，才能成为有效的HTML，因此这不会验证，并且可能会混淆屏幕阅读器或其他可访问性方法和测试框架。同意@blm，可以用类替换输入，然后应用该逻辑。编辑我的答案