使用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/

如果你可以使用它，你可以找出所有罕見的場景，因爲它非常適合防彈，與專有的快速黑客功能相比。你沒有解釋你在做什麼，所以我不能提供更多建議。