点击时将查询字符串参数添加到静态链接

Question

我正在寻找一种强大的方法，在访问者单击静态锚链接时动态注入查询字符串参数。

例如，一个链接：

<a href="http://www.johndoeslink.com">Test</a>

我想将查询字符串传递到下一页，但必须动态地分配值。我该如何实现？

我知道这很简单，只是我错过了什么明显的东西！ =\

提前感谢,

John d

- krex

Answer 1

有许多方法可以做到这一点。以下是我列出的两种非常简单的方法。在这里，我假设您已经有了对元素的引用（这里我称之为element）：

修改href属性

element.href += '?query=value';

使用点击事件监听器

element.addEventListener('click', function(event) {
    // Stop the link from redirecting
    event.preventDefault();

    // Redirect instead with JavaScript
    window.location.href = element.href + '?query=value';
}, false);

- James Donnelly

---

下面的答案还不错，但我会说这是更简洁的解决方案！谢谢！ - krex

如果url（element.href）已经有一个参数（例如，http://www.cnn.com?show=true&page=2）怎么办？这会导致您的方法失败，因为它只会追加一个额外的问号。 - bperdue

你可以使用一个 if 语句来检查是否已经存在一个 window.location.search。如果存在，就可以使用下面的代码将目标 URL 设置为 element.href + '&query=value'：if (window.location.search) { window.location.href = element.href + '&query=value'; } - James Donnelly

最好只使用 element.search = '?query=value'。这样，您就不必费心去处理元素是否已经有查询字符串，而是可能会添加到其中而不是替换它。 - ErikE

Answer 2

如果您已经知道在加载页面时要添加的值，则可以在文档准备就绪时添加它：如果您使用JQuery，请使用以下代码：

$( 'class' ).attr( 'href', function(index, value) {


return value + '?item=myValue';
});

否则（纯Javascript）：

var link = document.getElementById("mylink");
link.setAttribute('href', 'http://www.johndoeslink.com'+'?item=myValue');

- Oualid KTATA

---

这里没有标记jQuery。您应该指定用户需要包含jQuery库才能使其正常工作。 - James Donnelly

最好使用“search”属性而不是“href”属性。这样，您可以执行“element.search ='?query=value'”。这样做可以避免设置URL的域和路径部分。 - ErikE