Question

<!-- Some place on the webpage -->
  <input type="text" id="firstName">

<!-- Some other place on the same webpage, or maybe content ajaxed in later -->
  <input type="text" id="firstName">

假设我有一个服务器端脚本，它生成一个HTML页面，其中包含一些输入字段，每个输入字段都有自己的ID。一个服务器端类可能负责将输入字段添加到网页的一个部分，而另一个类负责处理网页的另一部分。或者您可能有不同的程序员在页面的不同部分工作。我想避免与HTML输入字段ID冲突。这样的示例可以是具有jQuery对话框弹出窗口的父窗体，其输入字段ID与父窗口相同。目前，我在ID前面加上生成它们的服务器端类的名称（以及一个下划线，以明确哪个部分是前缀）。要以这种方式获得完全唯一的ID，我可能必须开始包含服务器端类的完整命名空间，这可能会使我的ID很长。

有没有比输入前缀更好的方法或者最佳做法是什么？我通常对所有变量使用camelCase，只有这个例外。打破这条规则这是一个很好的例外吗？

你们大部分都在做什么？您是否正在改变选择这些输入字段而不是ID的方式？将输入字段包装在form标记或div标记中，并在服务器端添加功能以创建这些字段？（我希望能够自由地限制我将这些输入包装起来以选择它们。我的服务器端代码应该只生成客户端代码，只有知道那些输入进入页面才能获取值，而不是了解页面上的任何其他标签。更容易管理。）你是否在每组字段中添加css类？

Answer 1

在这种情况下我会使用类。如果你无法控制ID的唯一性，那么它们就会变得毫无意义。

不是从生成html的代码生成超长类名，而是可以向需要它们的输入添加许多较短的css类。在文档中有很多不同的类并且它们都可以与jQuery选择器一起使用并不罕见。还要记住，如果您的输入采用不同的形式，那么表单ID（或类）也可以被认为有点像'命名空间'。

作为参考，W3C Global Structure of an HTML document的第7.5.2点指出ID 必须是唯一的。

Answer 2

这个答案更多针对来自搜索引擎的用户。在我看来，如果你在动态生成的表单中使用id属性，它们应该是某种生成的id / hash，除非它确实是一个唯一的字段。除此之外，这可能是命名空间HTML表单的最佳方式，尤其是当它受到冲突时：

<input name="pet_store[name]" value="" />

<input name="dogs[0][name]" value="" />
<input name="dogs[1][name]" value="" />
<input name="dogs[2][name]" value="" />

<input name="cats[0][name]" value="" />
<input name="cats[1][name]" value="" />
<input name="cats[2][name]" value="" />

如果一次提交，输入将自动组织成数组（至少在PHP中）。

在jQuery中，你可以select这样的所有狗名字段：

$('input[name$="[name]"][name^=dogs]')

Answer 3

如果必须，请使用data-xxx属性，但我真的不能想到独立服务器端脚本生成数百个具有唯一ID的DOM元素的实际情况，直到名称冲突成为问题

Answer 4

id s的想法是它们是对元素的唯一引用，因此将多个元素引用到同一个id是不合法的（有效的HTML）。如果你想避免碰撞并仍然识别元素，你可以使用类的组合。

例如，如果您有两个要求姓名的表单（如之前的评论中所示），您可以使用：

<input type="text" class="ajax firstName" />

对于ajax和

生成的表单

<input type="text" class="initial-form firstName" />

对于网页上的初始表单。

同样，您可以使用data-属性来保存命名空间。 E.g：

<input type="text" data-namespace="ajax" class="firstName" />

（可以通过element.dataset["namespace"]的Javascript访问

有没有办法给HTML输入某种命名空间以避免冲突？

4 个答案: