重复的 ID - Jquery

Question

我的 html 页面中有重复 ID 的问题。

有时我需要从 Jquery 中的一个类中获取 id 值，所以：

<span class='click' id='23'>Click</span>

在另一个班级我有相同的 id：

<span class='classtow' id='23'>Click class two</span>

它适用于 Jquery，因为它是一个不同的函数来获取类 ID：

$(".click").click(function(){
var element = $(this);
var I = element.attr("id");
});
$(".classtwo").click(function(){
var element = $(this);
var I = element.attr("id");
});

但它不会通过 HTML 验证。解决此问题的最佳做法是什么？

我知道 id 必须是唯一的，我想知道我该如何解决这种情况（知道我需要对两者都使用 23 值 - 这是我需要点击的用户 ID）

Answer 1

ids 应该始终是唯一的。所以这是最好的解决方案。 对于 HTML 验证问题，我们需要验证码...

Answer 2

id 必须是唯一的...否则它将不是有效的 HTML...这是一个 HTML 规范！

您可以使用其他数据属性，例如 data-your-custom-id="25"

Answer 3

写在MDN:

id 全局属性定义了一个唯一标识符（ID），它在整个文档中必须是唯一的。其目的是在链接（使用片段标识符）、脚本或样式（使用 CSS）时识别元素。

id 必须是唯一的。你不应该使用它两次

这不是你问的，但请注意这个通知：

注意：使用除 ASCII 字母和数字以外的字符，“_”、“-”和“.”可能会导致兼容性问题，因为它们在 HTML 4 中是不允许的。尽管在 HTML 5 中取消了此限制，但为了兼容性，ID 应以字母开头。

Answer 4

很多人都建议过，但我会尽量让它更清楚。在 HTML5 中我们可以使用所谓的data-attributes。 You can also use these in older versions of HTML, though it won't pass a validator.（但它仍然比使用重复 ID 更好！）基本上，您可以通过指定 data-something=something 将自己的键值对添加到任何 html 元素。

例子：

<span class='click' data-userid='23'>Click</span>
<span class='classtwo' data-userid='23'>Click class two</span>

然后您可以像这样使用 jQuery 获取该值：

$("span").click(function () {
    var element = $(this),
        userid = element.data("userid");
    alert(userid);
});

See it here.