Question

我正在尝试在包含<a>Instagram</a>和<a>Email</a>的网站（包含jQuery）的导航栏中创建“联系”部分，但这只会在我悬停在{{1}上时显示}。

到目前为止，当我将鼠标悬停在#contact上时，我才能显示字符串。

HTML：

#contact

jQuery的：

<span id="contact">CONNECT</span>

我怎么能让我这样做“Instagram”和“电子邮件”是链接？

我试过了：

$("#contact").hover(function(){
  $(this).text(function(i, text){
    return text === "CONNECT" ? "Instagram | Email" : "CONNECT";
  })
});

但是当我徘徊时，我将$("#contact").hover(function(){ $(this).text(function(i, text){ return text === "CONNECT" ? "<a>Instagram</a> | <a>Email</a>" : "CONNECT"; }) });和"<a>Instagram</a>"作为字符串而不是链接。

非常感谢任何帮助！

Answer 1

如果您需要设置HTML而不是.html()，则需要使用.text()进行更新。

jQuery(function($) {
  $("#contact").hover(function() {
    $(this).html(function(i, text) {
      return $(this).text() === "CONNECT" ? "<a>Instagram</a> | <a>Email</a>" : "CONNECT";
    })
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="contact">CONNECT</span>

Answer 2

我认为这样做的一个好方法是创建两个链接元素并将它们附加到“CONNECT”范围，如下所示：

$("#contact").hover(
  function(){
    $( '#contact' ).empty();//Remove everything

    $("<a>", {
    text: 'Instagram',
    title: "Instagram",
    href: "www.instagram.com"
    }).appendTo( '#contact' );

    $("<span>", {
    text: ' | ',
    }).appendTo( '#contact' );

    $("<a>", {
    text: 'Email',
    title: "Email",
    href: "mailto:name@gmail.com"
    }).appendTo( '#contact' );  
},function(){
    $( '#contact' ).empty();//Remove everything
    $( '#contact' ).text("CONNECT");  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="contact">CONNECT</span>

使用.hover（）时如何用链接标记替换文本？

2 个答案: