Javascript-基于Select的动态href（无JQuery）

Question

I have a number of hrefs in my HTML:

  <a id="href7" href="./Doc.html?d=7">7-day</a>;
  <a id="href14" href="./Doc.html?d=14">14-day</a>;
  <a id="href30" href="./Doc.html?d=30">30-day</a>;

A user can also manually type the URL with and value for d. I have a second param of s which can be set with a select element

<select id="ddlSite" onchange="getSite(this)">
                <option value="A">Site A</option>
                <option value="B">Site B</option>
                <option value="C">Site C</option>
            </select>

I have this to get the new sitecode:

function getSite(sel) {
        var siteCode = sel.value;
}

When this changes, I want to set the parameter s to A, B or C, so the above URL's (if Site A is selected) would be:

 <a id="href7" href="./Doc.html?d=7&s=A">7-day</a>;
  <a id="href14" href="./Doc.html?d=14&s=A">14-day</a>;
  <a id="href30" href="./Doc.html?d=30&s=A">30-day</a>;

I could obviously update the href when the site changes, but seems somewhat inefficient and wouldn't help if the user types (for example):

http://example.com/Doc.html?d=22

In this case how would I (for want of a better phrase) grab the value of parameter s (assuming I stuffed it in a variable on an onChange event) and append to what the user entered (or the url they clicked). ie make

http://example.com/Doc.html?d=22 

become

http://example.com/Doc.html?d=22&s=A 

Thanks Mark

Answer 1

What about this?

function setSites(sel) {
  // Reuse your function, just in case other logic becomes needed (validation).
  var siteCode = getSite(sel).replace('$', '$$$$'); // escape for `''.replace()`
  var elements = document.getElementsByTagName("a");

  for (var i = 0; i < elements.length; i++) {
    var element = elements[i];
    var href = element.href;

    // Any <a> without an `href=` attribute should be skipped.
    if (href) {
      if (/[&\?]s=(.*?)[&$]/.test(href)) {
        // There already exists a selection here, and we don't want to duplicate
        // it. Also, the regex is made such that `s=` can be anywhere. The value
        // can be of any length, in case more characters are needed.
        element.href = href.replace(/([&\?]s=).*?([&$])/, '$1' + siteCode + '$2');
      } else {
        // Just append the new selection if it doesn't yet exist.
        element.href += '&s=' + siteCode;
      }
    }
  }
}

If you want just some of the <a> elements (eg in a named <div> ), then you can replace document with document.getElementById("id") or something similar that returns a single HTMLElement. Also, you could change the if-statement to filter any other <a> elements you would like.

In case you're curious, here's the jQuery solution for comparison:

function setSites(sel) {
  // Reuse your function, just in case other logic becomes needed (validation).
  var siteCode = getSite(sel).replace('$', '$$$$'); // escape for `''.replace()`

  $('a[href]').each(function () {
    var $elem = $(this);
    var href = $elem.attr('href');

    if (/[&\?]s=(.*?)[&$]/.test(href)) {
      // There already exists a selection here, and we don't want to duplicate
      // it. Also, the regex is made such that `s=` can be anywhere. The value
      // can be of any length, in case more characters are needed.
      $elem.attr('href', href.replace(/([&\?]s=).*?([&$])/, '$1' + siteCode + '$2');
    } else {
      // Just append the new selection if it doesn't yet exist.
      $elem.attr('href', href + '&s=' + siteCode);
    }
  });
}

Answer 2

Years ago I used something called jQuery BBQ by Ben Alman to do this:

http://benalman.com/projects/jquery-bbq-plugin/

If you use this you can figure out all the rare scenarios as it is pretty bullet proof, in comparison to a proprietary quick hack function. You haven't explained what you're doing so I can't advise much more.