JQuery 类选择器与 id 选择器

Question

我有 7 个不同的按钮，单击时都执行相同的 javascript 功能。我应该使用类选择器还是 id 选择器？

$("input.printing").on("click", function(event) {
     printPdf(event);
});

或

   $("#package1Pdf").click(function(event) {
         printPdf(event);
   });
$("#package2Pdf").click(function(event) {
         printPdf(event);
   });
$("#package3Pdf").click(function(event) {
         printPdf(event);
   });
$("#package4Pdf").click(function(event) {
         printPdf(event);
   });

各自的优点和缺点是什么？哪个是更优选的。

Answer 1

您可以使用不带多个选择器的 ID 过滤器:

$('[id^="package"]').click(printPdf);

上面将选择所有以“package”开头的 id。这意味着差异主要是语义上的。您应该选择对您的应用程序及其开发方式最有意义的。

请参阅jQuery attribute selectors page了解 jQuery 选择的灵 active 。在此页面上保留书签将防止您再次编写像第二个示例一样的代码。

哪个更好？

如果您设置了结构，以便拥有一个逻辑上正确定义适当元素集的类，那么您应该使用它来选择。

同样，如果您给了元素专门命名的 ID，并且没有附加表示您要选择的内容的描述性类名称，则使用 ID 选择。 几乎所有应用程序都不会关心性能差异，包括您的应用程序。