Question

我有一个网址列表：

localhost/action/add/234
localhost/action/add/244
localhost/action/add/334
localhost/action/add/254

在这些值的前面有一个文本框，当在框中输入一个值时，我想将它附加到URL的末尾。

localhost/action/add/234/test text1
localhost/action/add/244/test text2
localhost/action/add/334/test text3
localhost/action/add/254/test text4

有人可以解释我怎么办？我发现使用.val()可以做到这一点，但我不确定如何使用它。

Answer 1

如果您希望立即更新：

<script>
  $(function(){
    var a = $('#url').text();
    $('#textbox').keyup(function(){
      var b = $('#textbox').val();
      $('#url').text(a + '/test ' + b);
      $('#url').attr('href', a + '/test ' + b);
    });
  });
</script>

<input id='textbox' type='text'></input>
<a href="localhost/action/add/234" id='url'>localhost/action/add/234</a>

这里的关键是

在释放键盘键时使用.keyup()事件来运行该功能
修改keyup上的url元素的.text()
修改url元素的'href'属性，使链接与文本

通常.val()用于设置/获取输入元素的值，如文本框^或下拉列表

Answer 2

假设您要将在文本字段中键入的文本追加到href（URL）。我想我们可以让它变得更简单。

这是工作解决方案。

＆＃13;

$(document).ready(function(){
$('#search').on('click', function(e) {
 var search_url = e.originalEvent.currentTarget.href; //or else you can grab the URL anywhere from your DOM;
e.originalEvent.currentTarget.href = search_url + $('#search_term').val();
});
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="search_term" placeholder="Search..StackOverflow" />
<a href="https://stackoverflow.com/search?q=" id="search">Search </a>

＆＃13;

Answer 3

＆＃13;

$(function(){
   var currVal = $('.url').text();
   $('input[type="text"]').keydown(function() {
     $('.url').text(currVal.trim()+$(this).val().trim());    
 });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="url">
   localhost/action/add/234
</span>
   <input type="text" id="search_term" placeholder="blabla" />

＆＃13;

使用jQuery将文本字段值附加到URL

3 个答案: