使用多个选择器时，Uncaught SyntaxError: Invalid or unexpected token

Posted 2023-03-24

【中文标题】使用多个选择器时，Uncaught SyntaxError: Invalid or unexpected token

【英文标题】：When use multiple selector, Uncaught SyntaxError: Invalid or unexpected token

【发布时间】：2021-11-15 23:59:19

【问题描述】：

我收到此错误。我想添加多个选择器，但它给出了错误。问题是什么？

 jQuery(document).ready(function($) 
            $("nav.navbar.bootsnav.menu-style1 ul.dropdown-menu.megamenu-content .title,
                .pagination>li>a,
                .ulockd-title-icon,
    .fancybox-gallery-slider .owl-prev,
    .fancybox-gallery-slider .owl-next,
    .team-icon a,
    .twitter.style2 ul li a,
    .text-thm, .text-thm2").css("color", textColor);;
            return false;
    );

【问题讨论】：

问题是你不能在 JS 中的字符串中放置换行符。请改用模板文字。

单行写，会很长，读起来很费劲。有什么办法可以写成多行吗？

"..." + [newline] "..." + [newline]

是的，使用我提到的模板文字：$(`nav.navbar.bootsnav.... `).css(...)。话虽如此，你真的不应该有那么长的选择器。在所有这些元素上放置一个公共类，然后选择它。

这是另一个选项。我个人不喜欢在 \ 中结束一行，因为这会导致许多隐藏的错字 - 例如“\”是不同但不可见的：***.com/questions/21176327/…

【参考方案1】：

您可以通过多种方式解决此错误：

在每个换行符之前使用\

$("nav.navbar.bootsnav.menu-style1 ul.dropdown-menu.megamenu-content .title, \
    .pagination>li>a, \
    .ulockd-title-icon, \
    .fancybox-gallery-slider .owl-prev, \
    .fancybox-gallery-slider .owl-next, \
    .team-icon a, \
    .twitter.style2 ul li a, \
    .text-thm, .text-thm2").css("color", textColor);

使用字符串连接

$("nav.navbar.bootsnav.menu-style1 ul.dropdown-menu.megamenu-content .title,"
  + ".pagination>li>a,"
  + ".ulockd-title-icon,"
  + ".fancybox-gallery-slider .owl-prev,"
  + ".fancybox-gallery-slider .owl-next,"
  + ".team-icon a,"
  + ".twitter.style2 ul li a,"
  + ".text-thm,"
  + ".text-thm2").css("color", textColor);

从数组构建选择器

let selectors = [
  "nav.navbar.bootsnav.menu-style1 ul.dropdown-menu.megamenu-content .title",
  ".pagination>li>a",
  ".ulockd-title-icon",
  ".fancybox-gallery-slider .owl-prev",
  ".fancybox-gallery-slider .owl-next",
  ".team-icon a",
  ".twitter.style2 ul li a",
  ".text-thm",
  ".text-thm2"
];
$(selectors.join(',')).css("color", textColor);

使用模板文字

$(`nav.navbar.bootsnav.menu-style1 ul.dropdown-menu.megamenu-content .title,
    .pagination>li>a,
    .ulockd-title-icon,
    .fancybox-gallery-slider .owl-prev,
    .fancybox-gallery-slider .owl-next,
    .team-icon a,
    .twitter.style2 ul li a,
    .text-thm, .text-thm2`).css("color", textColor);

或者给他们一个通用的类

正如您所见，拥有很多这样的选择器并不容易使用。更不用说随着时间的推移管理变更。

为什么不给他们一个像changeable-color 这样的通用类并且只选择那个。更易于阅读和维护。

【讨论】：

有什么方法/工具可以节省添加加号的时间吗？

是的，它们之间只使用一个公共类。我基本上把它写出来让你复制和粘贴，所以现在就使用它。你可以使用正则表达式来重写代码，但我不相信你已经准备好了。

如果你问我，我更喜欢选择器数组的方式。在我看来更容易维护。