语法错误，无法识别的表达式，未显示 a[href 和画布

Syntax error, unrecognized expression with a[href and canvas not displaying

本文关键字：href 显示 表达式 错误 识别 语法      更新时间：2023-09-26

我在Bootstrap和jQuery上遇到了一个奇怪的问题。

我正在使用以下jQuery脚本在单击锚点和使用浏览器后退按钮返回页面顶部（删除 #anchorName 扩展名）时获得平滑滚动：

$(function() {
    $('a[href*=#]:not([href=#])').click(function(event) {
      event.preventDefault();
      if (location.pathname.replace(/^'//,'') == this.pathname.replace(/^'//,'') && location.hostname == this.hostname) {
        var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        var hash = this.hash; // 'this' will not be in scope in callback
      $('html,body').animate({ scrollTop: target.offset().top - 55}, 300, function() {
        href = window.location.href;
        history.pushState({page:href}, null, href.split('#')[0]+hash);
        });
      return false;
      }
      }
      });
    $(window).bind('popstate', function(event) {
        var state = event.originalEvent.state;
        var target = window.location.href.split('#');
        var href = target[0];
        if (state) {
        $('html,body').animate({ scrollTop: 0 }, 300, function() {
          history.replaceState({}, null, href);
          })
        }
        });
         
    window.onload = function() {
      history.replaceState({ path: window.location.href }, '');
    }   
});

如果我使用双引号 （ $('a[href*="#"]:not([href="#"])') ） 上面的脚本运行良好，但我测试的页面包含 HTML5 画布并且此画布不显示。

另一方面，如果我不使用双引号（$('a[href*=#]:not([href=#])') ）），"锚点"功能不起作用（我没有平滑滚动）并显示 HTML5 画布。

我在论坛上看到解决方案可能是：

1) double quoting :
$('a[href*="#"]:not([href="#"])')

或：

2) Unescape # character
$('a[href*=''#]:not([href=''#])')

我尝试了这些解决方案，但没有一个有效。

使用jQuery 1.12.0，我收到以下错误：

Error: Syntax error, unrecognized expression: a[href*=#]:not([href=#])

（代表问题作者发布答案以将其移动到答案空间）。

我自己解决了。最初，我的代码是：

    $(function() {
        $('a[href*=#]:not([href=#])').click(function(event) {
          event.preventDefault();
          if (location.pathname.replace(/^'//,'') == this.pathname.replace(/^'//,'') && location.hostname == this.hostname) {
            var target = $(this.hash);
          target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
          if (target.length) {
            var hash = this.hash; // 'this' will not be in scope in callback
          $('html,body').animate({ scrollTop: target.offset().top - 55}, 300, function() {
            href = window.location.href;
            history.pushState({page:href}, null, href.split('#')[0]+hash);
            });
          return false;
          }
          }
          });
    $(window).bind('popstate', function(event) {
        var state = event.originalEvent.state;
        var target = window.location.href.split('#');
        var href = target[0];
        if (state) {
        $('html,body').animate({ scrollTop: 0 }, 300, function() {
          history.replaceState({}, null, href);
          })
        }
        });
    window.onload = function() {
      history.replaceState({ path: window.location.href }, '');
        }   
    });

最后，下面的版本有效：

    $(window).bind("load", function () {
    
      $('a[href*="#"]:not([href="#"])').click(function(event) {
        event.preventDefault();
        if (location.pathname.replace(/^'//,'') == this.pathname.replace(/^'//,'') && location.hostname == this.hostname) {
        var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        var hash = this.hash; // 'this' will not be in scope in callback
        $('html,body').animate({ scrollTop: target.offset().top - 55}, 300, function() {
          href = window.location.href;
          history.pushState({page:href}, null, href.split('#')[0]+hash);
        });
        return false;
      }
      }
      });
    
      $(window).bind('popstate', function(event) {
        var state = event.originalEvent.state;
        var target = window.location.href.split('#');
        var href = target[0];
        if (state) {
          $('html,body').animate({ scrollTop: 0 }, 300, function() {
          history.replaceState({}, null, href);
          });
        }
      });
    });

似乎对于初始版本，脚本是在页面加载之前执行的，也许画布也没有加载。通过将所有脚本放入" $(window).bind("load", ，我认为一旦加载了所有脚本，就会执行转到锚点并返回页面顶部。

相关文章：