在切换时更改多个 TD 中元素中的 qTip 工具提示

Question

我在使用带有jQuery的qTip插件时遇到问题。我创建了一个js小提琴，看看它在做什么。我不确定如何解决这个问题（链接在问题描述之后）

所以我有一个清单。您将看到三个<tr>，每个都有一个工具提示。如果任务未完成，工具提示将显示"任务未完成"。如果任务已完成，工具提示将显示"任务完成"。

当您单击"切换"时，它应该将<tr>中的<span>更改为淡入/淡出并切换类并将工具提示从"完成"更改为"未完成"，反之亦然。

其他一切似乎都正常工作。它更改类，淡入/淡出，甚至更改标题属性。

问题是 qTip 插件仅将单元格中的工具提示直接更改为切换的右侧。它不会更改以下两个单元格中的工具提示。

一切似乎都是为了使其正常工作。知道发生了什么吗？这快把我逼疯了！！

JS小提琴

Answer 1

两种可能性：

1） 代替

.attr('title', 'This task is not yet complete.');

用

.qtip('option', {'content.text': 'This task is not yet complete.'});

qTip 在初始化时实际上会复制 title 属性（它不会绑定到它），因此为了更改 qTip，您需要通过 qTip 方法对其进行更改。

2） 将 qTip 的内容设置为 jQuery 对象。例如data-qtip将属性添加到标题元素中，该属性将是（例如）qtip 内容容器的 id（为每个 qtip 添加额外的div）：

$('[data-qtip]').each(function() {
    var q = $(this).attr('data-qtip');
    var content = $('#'+q);
    $(this).qtip({
        content: content, // here we reference the jQuery object
        position: {
            my: 'bottom center',
            at: 'top center'
        },
        style: { classes: 'ui-tooltip-dark ui-tooltip-rounded' }
    }
});

现在更改div 的内容将更改 qtip（因为这实际上是一个绑定）。

我个人认为第二种解决方案更好。它使您可以很好地控制qTip，当我处理动态工具提示（例如带有交互式图表的工具提示）时，它对我来说效果非常好。