windows.location.pathname 不工作

Question

我的一个案例无法正常工作。它们都可以工作，除了一个，它实际上在 URL 中有查询，但它们总是相同的。查询 URL 如下所示：http://mywebsite.com/search/?q=label:Web-Design|label:Graphic-Design|label:Identity-Design|label:Brand-Design

它不起作用，我想知道 windows.location 是否支持 URL 中的查询。在我看来这无关紧要，但无论哪种方式我都无法正常工作。

我 100% 肯定这是正确的路径名，因为我复制并粘贴了它，只是为了像其他域一样删除域。

这是我正在使用的：

    <script type='text/javascript'>
      $(document).ready(function(){
        switch (window.location.pathname) {
          default:
              $('.nav-blog').addClass('current');
              break;
          case '/p/about.html':
              $('.nav-about').addClass('current');
              break;
          case '/':
              $('.nav-home').addClass('current');
              break;
          case '/search/blog':
              $('.nav-blog').addClass('current');
              break;
          case '/p/forums.html':
              $('.nav-forums').addClass('current');
              break;
          case '/search/?q=label:Web-Design|label:Graphic-Design|label:Identity-Design|label:Brand-Design':
              $('.nav-design').addClass('current');
              break;
          case '/p/photography.html':
              $('.nav-photography').addClass('current');
              break;
          case '/p/hosting.html':
              $('.nav-hosting').addClass('current');
              break;
        }
      });
    </script>

Answer 1

更改开关中的变量以包含查询字符串

$(document).ready(function(){
        switch (window.location.pathname + window.location.search) {
          default:
              $('.nav-blog').addClass('current');
              break;
              case '/p/about.html':
              $('.nav-about').addClass('current');
              break;
              case '/':
              $('.nav-home').addClass('current');
              break;
              case '/search/blog':
              $('.nav-blog').addClass('current');
              break;
              case '/p/forums.html':
              $('.nav-forums').addClass('current');
              break;
              case '/search/?q=label:Web-Design|label:Graphic-Design|label:Identity-Design|label:Brand-Design':
              $('.nav-design').addClass('current');
              break;
              case '/p/photography.html':
              $('.nav-photography').addClass('current');
              break;
              case '/p/hosting.html':
              $('.nav-hosting').addClass('current');
              break;
        }
      });

但是，如果它们最后有查询字符串，这将与其他情况不匹配，而且目前您的 switch 语句是区分大小写的，您可能应该 toUpperCase() 或 toLowerCase() 您的 switch。

这应该可以解决您的大部分问题：

$(document).ready(function(){
    var path = window.location.pathname.toLowerCase();
    if(path == '/search/')
    {
        if(window.location.search.toLowerCase() == '?q=label:web-design|label:graphic-design|label:identity-design|label:brand-design')
            $('.nav-design').addClass('current');
        else
            $('.nav-blog').addClass('current');
    }
    else
    {
        switch (path) {
          default:
            $('.nav-blog').addClass('current');
            break;

            case '/p/about.html':
                $('.nav-about').addClass('current');
                break;

            case '/':
                $('.nav-home').addClass('current');
                break;

            case '/search/blog':
                $('.nav-blog').addClass('current');
                break;

            case '/p/forums.html':
                $('.nav-forums').addClass('current');
                break;

            case '/p/photography.html':
                $('.nav-photography').addClass('current');
                break;

            case '/p/hosting.html':
                $('.nav-hosting').addClass('current');
                break;
        }
    }
});

您应该比我在这里对您的输入（window.location.path、window.location.search）进行更多的清理，例如修剪它们（删除前导和尾随空格）并删除前导和尾随斜杠等。

如果由于某种原因您的查询字符串值的顺序不同，会发生什么情况？

这样的事情可能会发生，例如有人通过电子邮件发送一个链接，并且它在末尾或查询字符串中的某处有一个额外的空格，当收件人单击链接时，他们可能会转到正确的页面，但您的开关将点击默认值.