使用Jquery添加链接

Question

我试图根据当前页面添加一个链接到我的页面。我正在使用Squarespace构建此网站，因此我最容易的方法是使用Javascript或Jquery来完成。但我认为语法有些问题，可能是我忽略了某些细节。我已经尝试使用\转义出引号，但并没有起作用。如果只输出文本，则可以正常工作，但似乎在尝试使其与链接一起工作时会出现问题。请保留HTML标记。

 if(loc == pageOne) {
$("#pages").append("<div> <a href=\"http://design.optimus.com/projects?currentPage=2\">Next Page</a> </div>")
    }else{
  if(loc == pageOneB){
    $("#pages").append("<div> <a href=\"http://design.optimus.com/projects?currentPage=2\">Next Page</a> </div>")
  }else{
    if(loc == pageTwo){
     $("#pages").append("<div> <a href=\"http://design.optimus.com/projects\">Previous Page</a></div> ")
  }
 }
}

编辑：我刚刚检查了一下，在Chrome中链接似乎可以正常工作，但在Firefox中无法正常工作。

另一个编辑：所以这个链接在Safari中也可以工作。我想现在的问题是为什么Firefox不支持这种方法？是因为Firefox不支持这种方法吗？

- patricko

---

在您的附加语句中使用单引号，并保留文本中的双引号（不进行转义）。例如：$('#pages').append('<div> <a href="http://design.optimus.com/projects?currentPage=2">下一页</a> </div>') - j08691

Answer 1

你的代码看起来很好，不过你可以使用 else if 语句来代替嵌套的 if 语句：

if(loc == pageOne) {
    $("#pages").append("<div> <a href=\"http://design.optimus.com/projects?currentPage=2\">Next Page</a> </div>")
} else if (loc == pageOneB){
    $("#pages").append("<div> <a href=\"http://design.optimus.com/projects?currentPage=2\">Next Page</a> </div>")
} else if (loc == pageTwo){
    $("#pages").append("<div> <a href=\"http://design.optimus.com/projects\">Previous Page</a></div> ")
}​

以下是一个演示：http://jsfiddle.net/Rba6w/

- Jasper

---

谢谢，我会更改的。我的代码在除了火狐浏览器之外的所有浏览器中都能正常工作，但是为什么在火狐浏览器中不行呢？它显示文本但不是链接。在其他所有浏览器中，它都可以链接到下一页。 - patricko

@patricko 那么你的问题很可能是Firefox中loc值与其他浏览器中不同。在你的if语句之前，加上一个console.log(loc)（或alert(loc)）以查看不同浏览器中的值。您可能还希望对pageOne/pageOneB/pageTwo变量执行此操作（我不确定它们如何设置，但查看实际处理的内容总是一个好主意）。 - Jasper

现在的 loc 值是 URL，我是通过调用 window.location 获取它的。在 Firefox 中有所不同吗？ - patricko

当我在Firefox和Chrome中弹出警报时，我得到了相同的URL。然而，在Firefox中链接仍然无效。我不明白为什么会发生这种情况。 - patricko

让我们在聊天室继续这个讨论。 - patricko

我感到很愚蠢。我只是在CSS中添加了一个z-index，就使链接在Firefox中可点击了。 - patricko

Answer 2

看看这个是否有效

if(loc == pageOne) {
$("#pages").append('<div> <a href="http://design.optimus.com/projects?currentPage=2">Next Page</a> </div>')
    }else{
  if(loc == pageOneB){
    $("#pages").append('<div> <a href="http://design.optimus.com/projects?currentPage=2">Next Page</a> </div>')
  }else{
    if(loc == pageTwo){
     $("#pages").append('<div> <a href="http://design.optimus.com/projects">Previous Page</a></div>')
  }
 }
}

- Deept Raghav

---

它不起作用了。之前我至少能得到文本，现在什么也没有显示。 - patricko

Answer 3

试一下这个：

switch(loc)
{
case pageOne:
  $("#pages").append('<div> <a href="http://design.optimus.com/projects?currentPage=2">Next Page</a> </div>');
  break;
case pageOneB:
  $("#pages").append('<div> <a href="http://design.optimus.com/projects?currentPage=2">Next Page</a> </div>');
  break;
case pageTwo:
  $("#pages").append('<div> <a href="http://design.optimus.com/projects">Previous Page</a></div>"');
  break;
}

- Bradley Mountford