使用jQuery多选择器时触发Uncaught SyntaxError语法报错如何解决

开发者阿泽

2026-10-3

问题原因定位

核心问题是JavaScript 普通字符串不支持直接跨行书写，你使用双引号包裹的 jQuery 选择器字符串被拆分为多行，JS 解析器读到第一行末尾没有找到闭合的双引号，就会抛出非法字符的语法错误。

修复方案

根据你的使用场景可以任选以下一种方案修复：

方案1：将所有选择器合并为单行

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;
});

方案2：使用 ES6 模板字符串（反引号包裹）支持跨行，保留代码可读性

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;
});

方案3：将选择器存为数组后拼接，适合选择器数量多、后续需要频繁增删的场景

jQuery(document).ready(function($) {
    const 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);
    return false;
});