Javascript：销毁tippy.js实例

Posted 2023-02-22

【中文标题】Javascript：销毁tippy.js实例

【英文标题】：Javascript : Destroy tippy.js instance

【发布时间】：2019-02-22 21:00:03

【问题描述】：

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

我用过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 显示来自数据库的标签，但它在悬停时显示相同的标签/数据，数据不同但它显示第一次悬停时出现的工具提示。

【问题讨论】：

为什么所有声明都使用const？我的意思是代码中的每个变量。

+1，但事实证明我在 ajax 请求中发送的 ID 是唯一的最后一个，这就是为什么工具提示相同，我的错在那里。如何使用 $(this) 获取工具提示数据属性，为每个请求发送唯一 ID？

@Gammer 如果您希望获得准确的示例代码，您应该添加一些标记 - 因为问题并没有真正指出代码将运行的内容 - 因此只允许通用答案。

@martinZeitler 更新问题。

@martinZeitler 问题已更新

【参考方案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()... 的语法，这可能是获取句柄所必需的，需要相对于事件进行选择来源。

【讨论】：

+1，但事实证明我在 ajax 请求中发送的 ID 是唯一的最后一个，这就是为什么工具提示相同，我的错在那里。如何使用$(this) 获取工具提示数据属性，为每个请求发送唯一 ID？

我不认为const 会是一个问题。您不能重新分配变量本身，但重新分配其中的属性（更新它）是完全可以的。

@martinZeitler 它说Uncaught ReferenceError: selector is not defined 和$(selector).data("tooltip")

@Gammer selector 是各种 DOM 选择器常用的伪变量 - 而在 tooltip 事件的范围内，它将是 this，它指的是源事件的 - 在该范围之外，它宁愿是一个选择器字符串。

Uncaught ReferenceError: selector is not defined.

【参考方案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>

【讨论】：

完美...已解决，谢谢一百万，遗憾的是，您的答案无法投票一百万次。我会尽快接受答案。

很高兴我帮助解决了您的问题。 :)

同时，让我问你一些事情。目前，这适用于首次加载的内容。但是，如果 html 被追加，则它不起作用，这意味着当 <button data-tippy="Another tooltip" data-postId="3">Post 3</button> 动态追加时，工具提示不会出现。可以用它做什么？

@Gammer 如果我没听错的话，当您向页面动态添加新按钮时，提示不再显示？

这可能是由于tippy如何初始化（仅向当前页面上的元素添加提示）。您可以在添加新元素后尝试初始化它们（例如使用额外的类/数据属性加载它们 -> 初始化该类 -> 删除额外的类）。