我经常使用classes作为识别相关元素集的方法，例如：
<input value="10" class="sum-this" />
<input value="20" class="sum-this" />
<input value="30" class="sum-this" />
sum-this类没有CSS，并且没有在任何CSS文件中定义 - 例如在某些jQuery中使用 - 例如：
var total = 0;
$(".sum-this").each(function(i, el){
total += parseInt($(el).val());
});
console.log(total); // 60?
有没有正确的方法呢？我应该使用其他属性吗？ rel或data-*？
答案 0 :(得分：6)
正如@Pointy和@JustinPowell在评论中所述，这是完全有效的。事实上，它在W3C HTML4规范中也明确规定，除了选择样式之外，使用class属性是完全有效的。我引用：
另一方面，class属性为一个元素分配一个或多个类名;该元素可以说属于这些类。类名可以由多个元素实例共享。 class属性在HTML中有几个角色：
- 作为样式表选择器（当作者希望将样式信息分配给一组元素时）。
- 供用户代理进行一般处理。
但是，HTML5还为此添加了自定义data-*属性（其中*是自定义字符串）。
<强>链接
答案 1 :(得分：4)
如评论中所述，仅在JavaScript中使用类是完全正常的。但是这里有一个建议：当我的同事只想为此目的使用一个类时，它们会用'js-'作为前缀，以区分用于样式的类和为JS创建的类。
答案 2 :(得分：3)
虽然你的代码在语法上使用类是有效的，并且它没有任何问题，因为你正在寻找语义正确的东西我推荐data attributes。类实际上是用于样式化，而数据属性是“创建”，对于应该与特定元素相关但不需要任何已定义含义的数据具有可扩展性。“
您可以编写HTML：
<input value="10" data-item="sum-this" />
<input value="20" data-item="sum-this" />
<input value="30" data-item="sum-this" />
你的jQuery就像：
var total = 0;
$('input[data-item="sum-this"]').each(function(i, el){
total += parseInt($(el).val());
});
console.log(total);
答案 3 :(得分：1)
jQuery选择器优化不像以前那么重要，因为越来越多的浏览器实现了解析CSS语法的getElementsByClassName，querySelector和querySelectorAll。
所以选择的负担从jQuery转移到浏览器，现在jQuery支持大多数CSS3选择器，以及一些非标准选择器，你可以选择你想要使用的选择器。
但是，仍有一些提示要记住：
答案 4 :(得分：0)
正如其他人所说的那样，仅仅出于javascript的目的，对类元素进行完全合适。
在您提供的示例中，可以选择收集这些元素：
<input value="10" class="sum-this" />
<input value="20" class="sum-this" />
<input value="30" class="sum-this" />
使用：
document.querySelectorAll('.sum-this');（或jQuery中的$('.sum-this')）
可能是收集这些元素：
<input value="10" />
<input value="20" />
<input value="30" />
使用：
document.querySelectorAll('input[value]');