Question

几分钟前，我已经创建了一个类似的主题，您可以在此处看到： qTip2 (tooltip) line break not working已解决。

但我现在的问题是另一个问题。

如果您鼠标悬停链接，则它们都具有相同的title和相同的text，这是不正确的。例如，如果我使用title调试console.log(title)，则返回的值对于循环中的每个项都是正确的。

有什么不对？感谢。

Answer 1

你的旧JS：

$('a').each(function () {
    if ($(this).hasClass('qTip')) {
        var value = $(this).next('div')[0].innerHTML;
        var title = $(this).attr('title');
        $('.qTip').qtip({
            style: {
                classes: 'qtip-bootstrap'
            },
            content: {
                title: title,
                //text: value // The problem is here (on the `text` option)
                text: value
            }
        });
    }
});

工作JS：

$('a').each(function () {
    if ($(this).hasClass('qTip')) {
        var value = $(this).next('div')[0].innerHTML;
        var title = $(this).attr('title');
        $(this).qtip({
            style: {
                classes: 'qtip-bootstrap'
            },
            content: {
                title: title,
                //text: value // The problem is here (on the `text` option)
                text: value
            }
        });
    }
});

第5行是需要改变的行。 $('.qTip')选择该类的每个元素，并为它们提供所有相同的值。您需要拨打qtip $(this)，即当前<a>。

Answer 2

我发送给你JS Fiddle Code。

在布局中进行了大量更改以达到正确的要求。

HTML代码：

<div id="inner-dataContainer">
    <div id="tooltipsWrapper">
        <a class="qTip" title="Experience 1" data="text1"> (Experience 1) </a> <a class="qTip" title="Experience 2" data="text2"> (Experience 2) </a> <a class="qTip" title="Testing a little" data="text3"> (Experience 3) </a>
    </div>
</div>
<ul class="popupContent hide">
    <li id="text1" class="popupText">Date Start: 2014-04-08 10:00:00 Date End: 2014-04-10 15-00-00</li>
    <li id="text2" class="popupText">
        <p>Date Start: 2014-04-08 10:00:00</p>
        <p>Date End: 2014-04-10 13-00-00</p>
    </li>
    <li id="text3" class="popupText">
        <p>Date Start: 2014-04-08 10:00:00</p>
        <p>Date End: 2014-04-10 12-00-00</p>
    </li>
</ul>

JS代码：

$('#tooltipsWrapper a').each(function () {
        var dataValue = $(this).attr("data");
        aaa = $(".popupContent").find("li#" + dataValue).text();
        $(this).qtip({
            content: {
                text: aaa
            },
            position: {
                target: 'mouse', // Position it where the click was...
                adjust: {
                    scroll: true,
                    method: 'shift none'
                },
                viewport: $("#inner-dataContainer"),
                my: 'top center'
                /*,
                            at: 'bottom left'*/
            },
            style: {
                classes: 'qtip-cream qtip-rounded qtip-shadow custom-styling',
                width: '170px'
            },
            hide: {
                distance: 10
            }
        });
    });

CSS代码：

.hide {
    display: none;
}

如果您有任何其他问题，请在下方添加评论。

问候D.

qTip2循环工作但数据信息不会改变

2 个答案: