0

我有一个总是在变化的链接，我希望它根据链接指向的位置将一些文本打印到输入文本字段中。例如，我的链接可能如下所示。

<a onclick="main()" id="link" href="#foo">

或者有时相同的链接可能看起来像

<a id="link" href="#bar">

如果链接链接到#foo，那么我希望以下内容看起来像

<input id="input" type="text" value="Hello World" />

如果链接链接到#bar，那么我需要输入具有 Good Bye World 的值。

怎么能做到这一点。我尝试了以下方法，但我认为它不起作用，因为 URL 在用户点击它之前不会改变。所以它正在寻找尚不存在的东西。

function main() {
  var url = window.location.href;
  if (url.search("#foo") > 0) {
    document.getElementById("link").value = "#foo";
    document.getElementById("input").value = "Hello World";
  }
}

更新这是一个链接可能是一些哈希标签的列表。以及单击链接时输入文本字段会说什么。

#work = Can't talk I'm at work
#home = I have kids I still can't talk
#bar = I'm busy getting drunk I can't talk
#bathroom = Listen you perv I'm not interested don't you get it.

但请记住，该站点最初位于 example.com 的链接中，该链接可以包含它链接到的任何上述哈希标签。当用户单击该链接时，取决于链接 href 作为哈希标签的内容，确定将在输入字段中输入的内容。

4

3 回答 3

1

这应该可以，但是您不能使用 jsfiddle 对其进行测试。希望这可以帮助您理解。

JS：

document.getElementById('link').onclick = function () {
    var url = window.location.href;
    if (url.indexOf("#foo") > -1) {
        document.getElementById("link").innerHTML = "#foo";
        document.getElementById("input").value = "Hello World";
    }
}

HTML：

<a id="link" href="#foo">link</a>
<input id="input">
于 2013-08-12T22:48:50.987 回答
1

您是否尝试检查当前 URL 的哈希部分，如果是这样location.hash，如果您尝试检查单击链接的实际属性，您可能应该getAttribute改用 ？

function main() {
    var hash = window.location.hash,
        inp  = document.getElementById("input");

    if (hash == '#foo') {
        inp.value = "Hello World";
    }else if (hash == '#bar') {
        inp.value = "Goodbye World";
    }else{
        inp.value = "Stick a fork in me";
    }
}

您当然必须关闭这些锚点并拥有有效的标记！

编辑：

您可以摆脱内联 onclick 并执行以下操作：

$(window).on('hashchange', main);
于 2013-08-12T22:59:59.957 回答
0

将文本输入的 id 设置为“hello”并执行以下操作

function main(){
    if(url.indexOf("foo") != -1){
        document.getElementById("hello").value = "Hello World foo";   
    }else{
        document.getElementById("hello").value = "Hello World bar";  
    }
}

 <input type="text" id="hello" value="Hello World" />
于 2013-08-12T22:51:33.423 回答