如何根据地址栏中的字符串更改文本？

Question

我正在使用下面的代码在a 上添加一个select 类，该类有一个与地址栏中的字符串匹配的id。但我还需要 abe 更改 dropdown-toggle 的文本以匹配相同的字符串。

var string = document.location.href.split('=')[1];

if ($('li a[id^="filter-"][id*="' + string + '"]').length){
   $('li a[id^="filter-"][id*="' + string + '"]').addClass('selected');
}

var text = $("li a.selected").html();
var htmlText = text + ' <span class="caret"></span>';
$('.dropdown-toggle').html(htmlText);

以上代码将.dropdown-toggle的文字改为：

undefined

它应该改为

Ogilvy

完整的网址是：

http://www.example.com/xchanges/#comboFilters%5BAgencies%5D=.Ogilvy&comboFilters%5BClients%5D=.Vodafone

html

<ul id="filters" class="nav navbar-nav navbar-right">

                  <li class="option-combo dropdown  Agency">
                        <a class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">.Ogilvy&amp;comboFilters%5BClients%5D <span class="caret"></span></a>
                    <ul class="filter option-set dropdown-menu" role="menu" aria-labelledby="dropdownMenu1" data-filter-group="Agencies">
                    <li><a class="btn btn-default btn-lg" href="#" data-filter-value="">All agencies</a></li>
                                              <li><a id="filter-TBWA" class="btn btn-default btn-lg" href="#filter-agency-TBWA" data-filter-value=".TBWA">TBWA</a></li>
                                              <li><a id="filter-Ogilvy" class="btn btn-default btn-lg selected" href="#filter-agency-Ogilvy" data-filter-value=".Ogilvy">Ogilvy</a></li>
                                            </ul>
                  </li>

                  <li class="option-combo dropdown  Client">
                        <a class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">.Ogilvy&amp;comboFilters%5BClients%5D <span class="caret"></span></a>
                    <ul class="filter option-set dropdown-menu" role="menu" aria-labelledby="dropdownMenu2" data-filter-group="Clients">
                     <li><a class="btn btn-default btn-lg" ref="#" data-filter-value="">All clients</a></li>
                                              <li><a id="filter-Sky" class="btn btn-default btn-lg" href="#filter-client-Sky" data-filter-value=".Sky">Sky</a></li>
                                              <li><a id="filter-Vodafone" class="btn btn-default btn-lg selected" href="#filter-client-Vodafone" data-filter-value=".Vodafone">Vodafone</a></li>
                                            </ul>
                  </li>

                  <li class="option-combo dropdown  Year">
                        <a class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">.Ogilvy&amp;comboFilters%5BClients%5D <span class="caret"></span></a>
                    <ul class="filter option-set dropdown-menu" role="menu" aria-labelledby="dropdownMenu2" data-filter-group="Years">
                    <li><a class="btn btn-default btn-lg" ref="#" data-filter-value="">All years</a></li>
                                              <li><a id="filter-y2013" class="btn btn-default btn-lg" href="#filter-year-y2013" data-filter-value=".y2013">2013</a></li>
                                              <li><a id="filter-y2014" class="btn btn-default btn-lg" href="#filter-year-y2014" data-filter-value=".y2014">2014</a></li>
                                              <li><a id="filter-y2012" class="btn btn-default btn-lg" href="#filter-year-y2012" data-filter-value=".y2012">2012</a></li>
                                            </ul>
                  </li>
            <li><button class="btn btn-default btn-lg no-bkg" id="open-button">About</button></li>
                </ul>

Answer 1

首先使用document.location.hash 而不是href，所以您只使用#comboFilters%5BAgencies%5D=.Ogilvy&comboFilters%5BClients%5D=.Vodafone 而不是全部。

然后您需要将其按& 拆分为多个部分。对于每个部分，将 that 拆分为 = 并将其存储在一个对象中。完成后你只需要抓住你想要的部分：

var hash = document.location.hash;
// hard code a hash value here for the purposes of demonstrating the code
hash =  '#comboFilters%5BAgencies%5D=.Ogilvy&comboFilters%5BClients%5D=.Vodafone';

// create an object to act like a dictionary to store each value indexed by its key
var partDic = {};

// remove the leading "#" and split into parts
var parts = hash.substring(1).split('&');

// If you just want the first value, whatever it is, use this.
// But be aware it's a URL so can be set to anything in any order, so this makes little sense
// var string = parts[0].split('=')[1];

// build the dictionary from each part
$.each(parts, function(i, v) {
  // do the "=" split now
  var arr = v.split("=");

  // decode to turn "%5B" back into "[" etc
  var key = decodeURIComponent(arr[0]);
  var value = decodeURIComponent(arr[1]);

  // store in our "dictionary" object
  partDic[key] = value;
});

// check the part we want is in the URL
if(partDic["comboFilters[Agencies]"]) {
  // now just grab the part we want, and remove the leading "."
  var string = partDic["comboFilters[Agencies]"].substring(1);
  $('div').html(string);
}
else {
  $('div').html("Agency filter not set");
}

// ... continue as before

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div></div>