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

您的问题在这里：

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

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

您可以使用callback functions参数使当前元素被单击（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>

Answer 2

这是因为关键字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_45类似的post_id）

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

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

Javascript：销毁tippy.js实例

2 个答案: