使用Javascript - 基于选择（无JQuery的）动态HREF

Question

我有很多的HREF在我的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>; 

用户也可以手动输入与d的URL和价值。我有S的第二PARAM可以与选择元件

<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> 

我这来获得新的站点代码设置：

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

当这种变化，我想设置的参数s到A，B或C，因此上述网址（如果选择点A）是：

<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>; 

我能明显更新HREF时，该网站的变化，但似乎有点效率低下，如果用户不会帮助类型（例如）：

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

在这种情况下，我将如何（为一个更好的词来想要的）抢的参数s（假设我塞进它在一个onChange事件变量）的值，并追加到用户输入的内容（或他们点击的网址）。即让

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

成为

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

感谢 马克

Answer 1

这个是什么？

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; 
     } 
    } 
    } 
} 

如果你想只是一些<a>元件（例如，在一个名为<div>），那么你可以用document.getElementById("id")或类似的东西，它返回一个HTML元素单取代document。此外，您可以更改if语句以过滤您想要的任何其他<a>元素。

如果你很好奇，下面是比较jQuery的解决方案：

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

几年前，我用一种叫jQuery的烧烤由Ben Alman做到这一点：

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

如果你可以使用它，你可以找出所有罕见的场景，因为它非常适合防弹，与专有的快速黑客功能相比。你没有解释你在做什么，所以我不能提供更多建议。