Question

我使用下面的代码在select上添加a类，其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

完整的URl是：

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而不是整个事情。

然后你需要将&分成几部分。对于每个部分，将 按<{1}}拆分并将其存储在对象中。完成之后你只需要抓住你想要的部分：

＆＃13;
＆＃13;
=
＆＃13;
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
＆＃13;
＆＃13;
＆＃13;

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

1 个答案: