jquery - 新版本的 jQuery 说我有语法错误，但没有

Question

我有一个在 Wordpress 主题中使用的函数，在最近的更新之后，jQuery 开始在我的网站上抛出一个错误:

 Uncaught Error: Syntax error, unrecognized expression: .mobile_menu > ul > li.has_sub > span.mobile_arrow, .mobile_menu > ul > li.has_sub > h3, .mobile_menu > ul > li.has_sub > a[href*=#]
  at Function.ea.error (jquery.js?x11568:2)
  at ea.tokenize (jquery.js?x11568:2)
  at ea.select (jquery.js?x11568:2)
  at Function.ea [as find] (jquery.js?x11568:2)
  at n.fn.init.find (jquery.js?x11568:2)
  at new n.fn.init (jquery.js?x11568:2)
  at n (jquery.js?x11568:2)
  at initMobileMenu (autoptimize_aaf340fa1b0ef77ca18e853d0b265e53.js:332)
  at HTMLDocument.<anonymous> (autoptimize_aaf340fa1b0ef77ca18e853d0b265e53.js:332)
  at i (jquery.js?x11568:2)

堆栈跟踪将我指向 default.min.js 中名为 initMobileMenu 的函数，这是该函数:

 /*
 ** Show/Hide Mobile menu
 */
 var $j = jQuery.noConflict();
 function initMobileMenu(){
     "use strict";

     $j(".mobile_menu_button span").on('tap click', function(e){
      e.preventDefault();

    if ($j(".mobile_menu > ul").is(":visible")){
        $j(".mobile_menu > ul").slideUp(200);
    } else {
        $j(".mobile_menu > ul").slideDown(200);
    }
});

$j(".mobile_menu > ul > li.has_sub > span.mobile_arrow, .mobile_menu > ul > li.has_sub > h3, .mobile_menu > ul > li.has_sub > a[href*=#]").on('tap click', function(e){
    e.preventDefault();

    if ($j(this).closest('li.has_sub').find("> ul.sub_menu").is(":visible")){
        $j(this).closest('li.has_sub').find("> ul.sub_menu").slideUp(200);
        $j(this).closest('li.has_sub').removeClass('open_sub');
    } else {
        $j(this).closest('li.has_sub').addClass('open_sub');
        $j(this).closest('li.has_sub').find("> ul.sub_menu").slideDown(200);
    }
});

$j(".mobile_menu > ul > li.has_sub > ul.sub_menu > li.has_sub > span.mobile_arrow, .mobile_menu > ul > li.has_sub > ul.sub_menu > li.has_sub > h3, .mobile_menu > ul > li.has_sub > ul.sub_menu > li.has_sub > a[href*=#]").on('tap click', function(e){
    e.preventDefault();

    if ($j(this).parent().find("ul.sub_menu").is(":visible")){
        $j(this).parent().find("ul.sub_menu").slideUp(200);
        $j(this).parent().removeClass('open_sub');
    } else {
        $j(this).parent().addClass('open_sub');
        $j(this).parent().find("ul.sub_menu").slideDown(200);
    }
});

$j(".mobile_menu ul li > a, .mkd_logo a").on('click', function(){

    if(($j(this).attr('href') !== "http://#") && ($j(this).attr('href') !== "#")){
        $j(".mobile_menu > ul").slideUp();
    }
});
} 

我不明白为什么 jQuery 认为上面有语法错误？我用这个: https://esprima.org/demo/validate.html它说我的代码是有效的。我想知道它是否不喜欢这个表达式 "a[href*=#]"在我上面的代码中？

Answer 1

即使在 native querySelector 中，您的选择器也有问题。方法。

document.querySelector('.mobile_menu > ul > li.has_sub > span.mobile_arrow, .mobile_menu > ul > li.has_sub > h3, .mobile_menu > ul > li.has_sub > a[href*=#]');

但是，在散列周围加上引号(这会导致它被视为文字字符)会导致错误不再发生。

document.querySelector('.mobile_menu > ul > li.has_sub > span.mobile_arrow, .mobile_menu > ul > li.has_sub > h3, .mobile_menu > ul > li.has_sub > a[href*="#"]');