更改href文本是按钮点击文本框的值？

我想知道是否有可能让“a href”元素的文本成为按钮单击时文本框的值。更改href文本是按钮点击文本框的值？

$("#btn").click(function(){ 
 
$("#myLink").text($("#Coordinate1").val()); 
 
    $("#myLink").prop("href", "https://www.google.com/maps/place/" + $("#Coordinate1").val()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="Coordinate1"> 
 
<button id="btn">Click</button> 
 
<a id="myLink" href="#"><!-- THIS MUST BE VALUE OF "Coordinate1" --></a>

我希望解释清楚足够多。

谢谢。

求助：在下面选择的答案上添加了代码。感谢大家的帮助，所有成员提供的解决方案都能够满足我的需求。

来源

2017-02-23 MailBlade

在什么请点击？代码中没有按钮。 –

我没有添加按钮只是想解释它的要点。抱歉。 – MailBlade

似乎你想要做这样的事情。

$("#btn").click(function(){ 
 
\t $("#myLink").text($("#Coordinate1").val()); 
 
    $("#myLink").prop("href", "https://www.google.com/maps/place/" + $("#Coordinate1").val()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="btn">Click</button> 
 
<input type="text" id="Coordinate1"> 
 
<a id="myLink" href="#"><!-- THIS MUST BE VALUE OF "Coordinate1" --></a>

来源

2017-02-23 13:16:18 vatz88

谢谢！这是完美的按钮。顺便说一句，在我原来的代码它是在一个按钮元素，我只是没有包括它，因为我认为这是没有必要的，因为你们是专家！：）多谢，伙计！ – MailBlade

是的，你可以，但你必须这样做，当用户点击或完成键入链接或其他事件。这里我用一个按钮：

$("#change").click(function() { // when the button is clicked, change the href to whatever in the input + the root, and change it's text to the value as well 
 
    var value = $("#Coordinate1").val(); 
 
    $("#myLink").prop("href", "https://www.google.com/maps/place/" + value) // change the href 
 
       .text(value); // change the text content 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="Coordinate1"> 
 
<a id="myLink" href="#"> 
 
    <!-- THIS MUST BE VALUE OF "Coordinate1" --> 
 
</a> 
 
<button id="change">Change</button>

来源

2017-02-23 13:13:03

非常感谢。好的解决方案经过测试，也在我的环境中工作。 – MailBlade

我相信这是你问什么。我把你已经拥有的代码放在了我添加到页面的按钮元素的点击中。此外，请务必在a tag内提供实际的文字值，否则将无法点击给用户。

$("#update").click(function() { 
 
    $("#myLink").prop("href", "https://www.google.com/maps/place/" + $("#Coordinate1").val()); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="Coordinate1"> 
 
<button id="update">update</button> 
 
<a id="myLink" href="#"> 
 
Link 
 
    <!-- THIS MUST BE VALUE OF "Coordinate1" --> 
 
</a>

来源

2017-02-23 13:13:44 Joffutt4

非常感谢队友！ – MailBlade

您可以使用下面的代码：

function setLink() { 
 
    var t = document.getElementById("Coordinate1").value; 
 
    var h = "https://www.google.com/maps/place/" + t; 
 
    var link = document.getElementById("myLink"); 
 
    link.href = h; //set link url 
 
    link.innerText = h; //set link text (remove this line if you don't want it) 
 
}

<input type="text" id="Coordinate1" oninput="setLink()"> 
 
<input type="button" value="get link" onclick="setLink()"> 
 
<div> 
 
    <a id="myLink" href="#"></a><!-- THIS MUST BE VALUE OF "Coordinate1" --> 
 
</div>

来源

2017-02-23 13:16:32

请注意，它会立即更新链接（作为文本框中的用户类型），因此不再需要[获取链接]按钮..！ ; D希望有用 –

谢谢！它确实工作:)我已经选择了另一个答案作为解决方案，但仍然upvote。好的解决方案 – MailBlade

更改href文本是按钮点击文本框的值？

回答

相关问题