Javascript：销毁tippy.js实例

Question

我有以下代码，它显示了一个包含动态数据的工具提示。 它工作正常，但它向所有人显示相同的工具提示。

我用过tip._tippy.destroy(); 位没用。

<div id="template" style="display: none;">
    Loading a tooltip...
</div>

上面显示工具提示的元素：

<span class="more-tags otherPostTags" data-postId="{{$post->id}}">...</span>

Js：

const template = document.querySelector('#template')
const initialText = template.textContent
const tip = tippy('.otherPostTags', {
    animation: 'shift-toward',
    arrow: true,
    html: '#template',
    onShow() {
        const content = this.querySelector('.tippy-content')
        if (tip.loading || content.innerHTML !== initialText) return
        tip.loading = true
        node = document.querySelectorAll('[data-tippy]');
        let id = node[0].dataset.postid;
        $.ajax({
            url: '/get/post/'+id+'/tags',
            type: 'GET',
            success: function(res){
                let preparedMarkup = '';
                res.tags.map(function(item) {
                    preparedMarkup +=
                        '<span class="orange-tag" style="background-color: '+item.color+'">'+
                            item.name +
                        '</span>';
                });
                content.innerHTML = preparedMarkup;
                tip.loading = false
            },
        });
    },
    onHidden() {
        const content = this.querySelector('.tippy-content');
        content.innerHTML = initialText;
    },
});

当我将鼠标悬停在上面时，tooptip 显示来自数据库的标签，但它在悬停时显示相同的标签/数据，数据不同但它显示第一次悬停时出现的工具提示。

Answer 1

这是因为关键字const 创建了一个只读变量。

常量是块范围的，很像使用 let 语句定义的变量。

常量的值不能通过重新赋值改变，也不能重新声明。

您必须将其更改为 var 或 let，因为它必须是 mutable（const 不是）。

var 语句声明一个变量，可选择将其初始化为一个值。

let 语句声明了一个块范围的局部变量，可选择将其初始化为一个值。

抛开理论不谈，您必须将 const tip 更改为 var tip - 才能更新和/或销毁它。

根据以下标记 - 这仍然有点狭窄，因为它不是整个帖子标记的呈现 HTML 输出，因为需要以可靠的方式重现问题：

<span class="more-tags otherPostTags" data-postId="{{$post->id}}">...</span>

可以（可能在事件源范围内）获得类似的 id：

var id = parseInt($(this).data('postId'));

处理 id 的最常用方法是结合使用整个帖子节点的属性 id（例如，与 post_id 类似的 post_45）结合

var id = parseInt($(selector).attr('id').replace('post_', ''));

底线是，如果没有单个帖子的完整标记，我只能提示类似 $(this).parent().parent()... 的语法，这可能是获取句柄所必需的，需要相对于事件进行选择来源。

Answer 2

你的问题在这里：

node = document.querySelectorAll('[data-tippy]');
let id = node[0].dataset.postid;

您始终选择相同的元素 (node[0])，而不是选择当前悬停的元素。

您可以使用回调函数参数来获取单击的当前元素（onShow 第一个参数包含对引用原始元素的对象的引用，在我的示例中 - tip.reference）。示例如下：

tippy.setDefaults({
  arrow: true,
  delay: 240,
  theme: 'my-tippy',
  onShow(tip) {
    console.log('Post id: ' + $(tip.reference).data('postid'));
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/tippy.js@3/dist/tippy.all.min.js"></script>
<button data-tippy="Tooltip" data-postId="1">Post 1</button>
<button data-tippy="Another tooltip" data-postId="2">Post 2</button>
<button data-tippy="Another tooltip" data-postId="3">Post 3</button>