更改點擊的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）

回答

相關問題