Javascript: уничтожить экземпляр tippy.js - PullRequest
Новая
       21

Javascript: уничтожить экземпляр tippy.js

0 голосов
/ 18 сентября 2018

У меня есть следующий код, который показывает подсказку, содержащую динамические данные.Работает нормально, но показывает одинаковую подсказку для всех.

Я использовал 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;
    },
});

При наведении курсора, всплывающее окно показывает с тегами, поступающими из базы данных, но оно показывает те же теги / данные при наведении курсора, Данные появляются по-другому, но отображаются всплывающие подсказки, которыеприходит при первом зависании.

Ответы [ 2 ]

0 голосов
/ 23 сентября 2018

Ваша проблема здесь: 

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>
0 голосов
/ 23 сентября 2018

это потому, что ключевое слово const создает переменную только для чтения.

Константы имеют блочную область, во многом как переменные, определенные с помощью оператора let.

Значение константы не может быть изменено путем переназначения, и оно не может быть повторно объявлено .

Вы должны изменить его на var или let, потому что оно должно быть mutable (что не const).

Оператор var объявляет переменную, необязательно инициализируя ее значением.

Оператор let объявляет локальную переменную области видимости блока, при желании инициализируя ее значением. За исключением теории

, необходимо изменить const tip на var tip - чтобыобновить и / или уничтожить его.

в соответствии со следующей разметкой - которая все еще немного узкая, поскольку она не является отображаемым HTML-выводом разметки одного целого сообщения, так как это потребуется для воспроизведения проблемынадежным образом: 

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

можно (возможно, остроумиев области источника события) получите идентификатор одинаково: 

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

самый распространенный способ обработки идентификаторов - использование атрибута id (например,с одинаковым значением post_id post_45) всего узла записи в сочетании с 

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

нижняя строка означает, что без полной разметки одного сообщения я могу только намекать на синтаксис одинаковый $(this).parent().parent()..., который может потребоваться для получения дескриптора, который должен быть выбран относительно источника события.

...