Home > Blockchain >  When use multiple selector, Uncaught SyntaxError: Invalid or unexpected token
When use multiple selector, Uncaught SyntaxError: Invalid or unexpected token

Time:09-22

I get this error.I want to add multiple selector and it gives error.what is the problem?

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

CodePudding user response:

You can adress this error a couple of ways:

Use \ before each newline

$("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);

Use string concatination

$("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);

Build selectors from array

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

Using a template literal

$(`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);

or give them a common class

As you can see having a lot of selectors like this is not easy to use. Not even speaking of managing changes over time.

Why not give them a common class like changeable-color and only select that one. Easier to read and maintain.

  • Related