7

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

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

4

2 回答 2

5

你的问题在这里：

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>

于 2018-09-23T13:16:42.450 回答
1

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

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

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

您必须将其更改为varor 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 alike ）post_45

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

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

于 2018-09-23T12:34:38.837 回答