如何使用 onclick 事件链接到网页而不是 href？答案

【问题标题】：How do I use the onclick event to link to a web page instead of href?如何使用 onclick 事件链接到网页而不是 href？
【发布时间】：2023-03-21 02:17:01
【问题描述】：

我有一个带有 href 的锚标记。我需要在输入文本框的 href 中的最后一个 / 之后添加一个字符串。我试图将输入框的值添加到 href 中，但没有成功。我可以使用 onclick 事件将值添加到链接字符串吗？如何使用 jquery 来完成？这是代码：

//This is the Search Button
$('#switch-fighter-search-button-link').attr("href","/fighters/search/");

//This is the Input box
var sft = $('$switch-fighter-text').val();

【问题讨论】：

您可以编辑您的问题以包含您的 HTML 和点击事件处理程序吗？那会有所帮助。另外，您是否尝试在单击链接时更改 href 并让您的浏览器转到更改后的链接，或者在单击其他内容时更改它？

标签： javascript jquery hyperlink href

【解决方案1】：

这样它将获取原始链接的href并添加id为“switch-fighter-text”的元素的值

$('#switch-fighter-search-button-link').click(function(){
  window.location=$(this).attr("href")+$('#switch-fighter-text').val();
  return false;
});

【讨论】：

【解决方案2】：

不完全确定您在这里尝试做什么，但如果您可以提供更多有用的代码。这是我认为您可能正在尝试做的一个示例：

<script type="text/javascript>
$('#submit').click(function(){
    var $link = $('#link1');
    //add to the href
    $link.attr('href', $link.attr('href') + "?id=1");
});

//note that if you want to prevent the link from submitting do like so
$('#link1').click(function(){

    //force redirect to a specific url, adding to the href on the fly
    window.location = $(this).attr('href') + "&user=me";

    return false; //prevents href from changing window.location

});

</script>
<body>
    <input id="submit1" type="Submit" value="Submit"></input>
    <a id="link1" href="somelink/test.html">Link</a>
</body>

【讨论】：

【解决方案3】：

这样的事情应该可以工作：

$('$switch-fighter-text').change(function() {
    var link = $('#switch-fighter-search-button-link');
    link.attr('href', link.attr('href') + $(this).val());
});

【讨论】：

如果您多次更改它会发生什么？

【解决方案4】：

$('#switch-fighter-search-button-link').attr("href", $('#switch-fighter-search-button-link').attr("href") + $('$switch-fighter-text').val() );

这会将您的文本框的值添加到已经存在的 href src

但我认为点击页面后可以更改 href src 将不起作用。所以使用

onclick=" window.location='"' + $('#switch-fighter-search-button-link').attr("href") + $('$switch-fighter-text').val(); + '"'; "

【讨论】：

【解决方案5】：

$('#switch-fighter-search-button-link').click(function(){
   window.location="/fighters/search/"+$('$switch-fighter-text').val();
   return false;
});

【讨论】：

我想你想要一个return false那里