点击时改变链接的href属性

Change href attribute of link on click

本文关键字：href 属性 链接 改变      更新时间：2023-09-26

我只是尝试改变href

的值

$("div").click(function() {
  $("a#link1").attr("href").val("www.bing.de");
});
div {
  border: 1px solid black;
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="link1" href="www.google.de">LINK</a>
<div>Click here</div>

但是这会抛出错误Uncaught TypeError: $(...).attr(...).val is not a function，我不知道为什么?据我所知，val是一个函数

试试这个

你不能用val()方法改变属性。val()仅用于输入值。

您可以使用attr("aatribute_name",value);或prop("attribute_name","value"); 

$("div").click(function() {
  $("a#link1").attr("href","www.bing.de");
});
div {
  border: 1px solid black;
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="link1" href="www.google.de">LINK</a>
<div>Click here</div>

您可以使用attr或prop

$("a#link1").prop("href","www.bing.de")

是要修改的属性值，而不是val。val基本上是用来获取值，有时设置值，而不是属性。

试试下面的代码片段。

问题在这里:$("a#link1").attr("href").val("www.bing.de"); 

$("div").click(function(){
	$("a#link1").attr("href","www.bing.de");
});
div {
    border: 1px solid black;
	cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="link1" href="www.google.de">LINK</a>
<div>Click here</div>

使用 setAttribute()的Javascript实现:

document.querySelector("a#link1").setAttribute("href", "www.bing.de");
//or
document.querySelector("a#link1").href = "www.bing.de";

Assign with href也有效

$("div").click(function() {
   $("a#link1")[0].href = "www.bing.de";
});

.val()用于输入、选择和文本区域。它应该这样命名:

$("div").click(function() {
  $("a#link1").attr('href','www.bing.de');
});

为什么它不工作，因为你试图分配值给anchor tag。val()不给anchor tag赋值。为此，您必须使用如下方法。

不是这个:- 

$("div").click(function() {
  $("a#link1").attr("href").val("www.bing.de");
});

这个-

  $("div").click(function() {
      $("a#link1").attr("href","www.bing.de");
    });
相关文章：