Question

想知道是否有人可以指出我正确的方向：我正在尝试创建一个带有输入框的静态URL的体验，但是当用户输入任何内容时，该URL会发生变化并且还会添加“#xyz”

静态网址：google.com 用户将“123”添加到输入框并单击“继续” 新标签随google.com/123#xyz

一起打开

这是我正在努力的小提琴：

<input type="text" id="askquestion" placeholder="ask your question" />
<a class="target" href="https://www.google.com" target="_blank">Proceed</a>

$(document).ready(function() {
    $('#askquestion').change(function() {
      var newurl = $('#askquestion').val();
      $('a.target').attr('href', newurl + '#123');
    });
});

目前这两个问题：它没有google.com网址＆amp;它添加'/＃'而不是'＃'

感谢您的任何见解 -Y

Answer 1

试试这个：http://jsfiddle.net/Sxz4R/537/

您覆盖了a.target的href，您只需要正确撰写网址即可。

另请注意，我在原始http://www.google.com/链接中为proceed添加了一个尾部斜杠

Answer 2

这是我改进的版本。请注意，即使在用户输入中，我也能正确处理斜杠。

$(document).ready(function() {
  var $a = $('a.target'),
    baseUrl = $a.attr('href').replace(/\/+$/, ''); // remove any trailing slash
  $('#askquestion').on('change input', function() {
    var newurl = $(this).val();
    // add a leading slash after removing any that might be there already
    newurl = '/' + newurl.replace(/^\/+/, '');
    $a.attr('href', baseUrl + newurl + '#123');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="askquestion" placeholder="ask your question" />
<a class="target" href="https://www.google.com" target="_blank">Proceed</a>

Javascript：根据用户输入添加到静态网址＆amp;添加#xyz到它

2 个答案: