4 
<!-- 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 类添加到每组字段？

4

4 回答 4

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 中，对于 nodejs，您可能会通过https://www.npmjs.com/package/qs获得成功）。

在 jQuery 中，您可以像这样选择所有狗名字段：

$('input[name$="[name]"][name^=dogs]')
于 2015-02-21T21:47:03.350 回答
1

I would use classes in this case. If you can't control what the uniqueness of ID's then they become pretty meaningless.

Instead of generating a super-long class name from the code that generates the html, you could add many shorter css classes to inputs that need them. It's not unusual to have lots of different classes in your document and they can all be used together with jQuery selectors. Also remember that if your inputs are in different forms then the form id (or class) could also be considered to work a bit like a 'namespace' too.

For reference, point 7.5.2 of the W3C Global Structure of an HTML document states that the id must be unique.

于 2014-01-06T20:13:25.610 回答
0

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

于 2014-01-06T20:23:27.240 回答
0

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

例如，如果您有 2 个表格要求输入姓名（如您之前的评论中所述），您可以使用：

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

对于ajax生成的表单，以及

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

对于网页上的初始表单。

同样，您可以使用该data-属性来保存命名空间。例如：

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

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

于 2014-01-06T21:05:20.860 回答