更改点击的qtip工具提示的值（jquery）

我有一个工具提示（qtip）的链接。在切换时，它会在页面上添加一个快速链接。如果我再次点击它，则删除快速链接。到现在为止还挺好。不过，我想改变拨动数据提示的文字以及（从“添加快速链接”到“删除快速链接”）更改点击的qtip工具提示的值（jquery）

这是我到目前为止有：

<a class="add-link" data-tooltip="add quick link"></a>

的jquery：

$('.add-link').click(function() { 
    if ($(this).attr('data-tooltip', 'add quick link')) { 
     $(this).attr('data-tooltip', 'remove quick link'); 
    } else { 
     $(this).attr('data-tooltip', 'add quick link'); 
    } 
    $(this).toggleClass("added"); 
});

CSS：

a.add-link { 
    content: '+'; 
} 

a.add-link.added { 
    content: '-';

}

它正确地切换类，但qtip工具提示中的文本不会更改。已经搜索过SO和qtip API，但无法完成此项工作。有谁知道我做错了什么？谢谢。

来源

2016-10-12 Wim Mertens

我没有看到任何线，使文字变化 – guradio

你启用qtip缓存？ – jNewbie

@guradio文本更改处于if/else状态。 –

这可以工作，但您必须将鼠标关闭并移回锚点以在点击后看到它发生了变化。

$('.add-link').click(function() { 
 
    if ($(this).attr('data-tooltip') === 'add quick link') { /* fixup */ 
 
    $(this).attr('data-tooltip', 'remove quick link'); 
 
    } else { 
 
    $(this).attr('data-tooltip', 'add quick link'); 
 
    } 
 
    $(this).toggleClass("added"); 
 
}); 
 

 
/* '.add-link' instead of 'a' if you like, or 'a.add-link' */ 
 
$('a').qtip({ 
 
    content: { 
 
    text: function(event, api) { 
 
     return $(this).attr('data-tooltip') 
 
    } 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/qtip2/3.0.3/basic/jquery.qtip.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/qtip2/3.0.3/basic/jquery.qtip.css" rel="stylesheet" /> 
 
<a class="add-link" data-tooltip="add quick link" href="#">I am an anchor...</a> 
 
<br>Click link &amp; move mouse out and back over to see tooltip changed

来源

2016-10-12 04:55:42 smcd

**缓存：错误，**在qtip选项中没有任何效果，忘记了提前取出。 – smcd

更改点击的qtip工具提示的值（jquery）

回答

相关问题