Question

我的HTML中有很多href：

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

用户还可以手动键入URL和d的值。我有一个s的第二个参数，可以用select元素

设置

<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，因此上面的URL（如果选择了站点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事件的变量中）并附加到用户输入的内容（或者他们点击的url）。即制作

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替换为document.getElementById("id")或类似的返回单个的<a> HTML元素。此外，您可以更改if语句以过滤您想要的任何其他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); } }); }元素。

如果你有点好奇，请点击jQuery解决方案进行比较：

{{1}}

Answer 2

多年前，我使用了Ben Alman所谓的jQuery BBQ来做这件事：

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

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

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

2 个答案: