Question

当我在使用qTip2工具提示的强大插件时，我会遇到两个问题：

首先点击几次（有时是4或7次）点击我！＆＃39;隐藏div的链接内容丢失。另一个奇怪的事情就是第二个内容链接“点击我！”＃39;链接有自己的标题，由qTip2显示： - ）

如果有人遇到过这个问题吗？

代码：

$(document).ready(function() {

    var arrayData = [],
        elems = $('div'),
        tips = $('a');

    tips.each(function(i) {
        arrayData.push(parseInt($(this).data('tooltip'),10)-1);

        $(this).qtip({
            show: 'click',
            hide: 'unfocus',
            content: {
                text: $(elems[arrayData[i]])
            }
        });
    }); 
});

链接到工作示例： JSFiddle

Answer 1

我将分两部分回答你的问题。

1）消失的内容实际上这个也困惑了我。如果您检查DOM并单击：第一个链接，第四个链接，第一个链接。然后div消失了。当你点击它时，似乎第4个链接“窃取”了第一个内容。对此的解决方案是在将内容交给qTip2.0之前克隆内容。如果你想更好地理解为什么会这样。你应该试着在论坛上提问。 qTip的作者通常回答大多数问题。

2）链接上的标题是因为您选择了DOM中的每个锚标记（<a>）并将qTip应用于所有锚标记。这可以通过向想要实际成为qTips的类添加类来解决。

<强> HTML：

<a class="tip" href="#" data-tooltip="1">Click me!</a>

<a class="tip" href="#" data-tooltip="2">Click me!</a>

<a class="tip" href="#" data-tooltip="3">Click me!</a>

<a class="tip" href="#" data-tooltip="1">Click me!</a>

<div class="hidden elem">aaaaaaaaaaaaaaaaa 1</div>
<div class="hidden elem">bbbbbbbbbbbbbbbbb 2 <a href="#" title="bbbbbbbbbbbbbbbbb 2">link</a></div>
<div class="hidden elem">ccccccccccccccccc 3</div>

<强> JAVASCRIPT

$(document).ready(function () {
    var arrayData = [],
        elems = $('.elem'),
        tips = $('.tip');

    tips.each(function (i) {
        arrayData.push(parseInt($(this).data('tooltip'), 10) - 1);
        var text = $(elems[arrayData[i]]).clone();

        $(this).qtip({
            show: 'click',
            hide: 'unfocus',
            content: {
                text: text
            }
        });
    });
});

更新了JSFiddle： http://jsfiddle.net/kri5t/9f81vh0e/

qTip2 - 几次点击后隐藏div的内容消失

1 个答案: