javascript - 从 URL 哈希设置页面状态 - 语法错误 (jQuery)

Question

我正在尝试在 WordPress 网站上调试一个脚本，该脚本允许动态过滤职位列表(通过 Jobvite)。当页面最初加载时未附加任何 URL 参数时，例如site.com/jobs/all-positions——过滤器工作正常；但是，当页面加载/重新加载时附加了参数 - 例如site.com/jobs/all-positions#country=united-states&city=minneapolis，过滤器根本不起作用，我在控制台中看到以下 jQuery 错误:

Syntax error, unrecognized expression: #country%3Dunited-states%26city%3Dminneapolis

似乎 URI 组件没有正确编码(？)，我想知道处理过滤的插件脚本中是否存在我没​​有看到的错误，我将其包含在下面:

// Update Filter hash
  function updateFilterHash() {
    var filterHash  = '#';

    if ( selectedCountryFilters.length !== 0 ) {
      filterHash += "country=" + selectedCountryFilters.join(",") + "&";
    }
    if ( selectedCityFilters.length !== 0 ) {
      filterHash += "city=" + selectedCityFilters.join(",") + "&";
    }
    if ( selectedCategoryFilters.length !== 0 ) {
      filterHash += "category=" + selectedCategoryFilters.join(",") + "&";
    }

    console.log(filterHash);

    $.History.go( filterHash );
  }

  // Set page state from URL hash
  if ( location.hash.length !== 0 ) {

    // Set Req detail view
    if ( location.hash.indexOf("#req-") !== -1 ) {
      var reqId = encodeURIComponent(location.hash.slice(1));
      $(".all-requisitions").hide();
      $(".all-open-positions-title").hide();
      $(".breadcrumbs").append( "<span> &gt; " + $("[data-id='" + reqId + "'] h1").text() + "</span>" );
      $(".requisition-detail[data-id='" + reqId + "']").fadeIn();
    }

    // Set Filters
    if ( location.hash.indexOf("&") !== -1 ) {
      var hashParts = encodeURIComponent(location.hash.slice(1)).split("%26");

      // Activate Filters
      for (var i = 0; i < hashParts.length; i++) {

        if ( hashParts[i] !== "" ) {
          var hashPairs  = hashParts[i].split("%3D");
              hashName   = hashPairs[0],
              hashValues = hashPairs[1].split("%2C");

          for (var j = 0; j < hashValues.length; j++) {
            $("a[href='#" + hashName + "-" + hashValues[j] + "']").addClass("selected");

            // Update appropriate Filter arrays and perform other Filter-specific actions
            switch (hashName) {
              case "country":
                selectedCountryFilters.push( hashValues[j] );

                // If Filter is a Country, reveal the Cities too
                updateCityFilters();
                break;

              case "city":
                selectedCityFilters.push( hashValues[j] );

                // If Filter is a city, activate the Country too
                var hashCountry = $("a[href='#" + hashName + "-" + hashValues[j] + "']").data("country");
                $("a[href='#country-" + hashCountry + "']").addClass("selected");
                selectedCountryFilters.push( hashCountry );
                break;

              case "category":
                selectedCategoryFilters.push( hashValues[j] );
                break;

              default:
                break;
            }

          }

        }
      }

      updateReqs();
      updateCategoryHeadings();
    }
  }

这只是脚本中处理 URI 哈希组件的部分，我认为问题一定出在此处。真正令人沮丧的是，页面/脚本在测试服务器上(因此在不同的 WordPress 安装上)工作得很好，但在临时服务器上却不行。但是，两者都具有相同版本的 WP，并且加载相同版本的 jQuery。关于为什么脚本无法正确解析 URI 组件，您有什么想法吗？

Answer 1

使用？而不是#

site.com/jobs/all-positions?country=united-states&city=minneapolis