Question

我有工具提示（qtip）的链接。在切换时，它会在页面上添加快速链接。如果我再次单击它会删除快速链接。到现在为止还挺好。不过，我也希望在切换时更改数据工具提示的文本（从＆＃34;添加快速链接＆＃34;到＆＃34;删除快速链接＆＃34;）

这是我到目前为止所得到的：

<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，但无法完成此工作。有谁知道我做错了什么？感谢。

Answer 1

这样做但你必须将鼠标移开并重新移回锚点，以便在点击后看到它发生了变化。

$('.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

在click（jquery）上更改qtip工具提示的值

1 个答案: