Цикл qTip2 работает, но информация о данных не меняется

Question

Несколько минут назад я создал похожую тему, как вы можете видеть здесь: не работает разрыв строки qTip2 (подсказка), что решено.

Но моя проблема сейчас другая.

Вот пример в http://jsfiddle.net/8LFfL/2/.

Если вы наведите курсор мыши на ссылки, все они имеют одинаковые 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 здесь.

Множество изменений внесено здесь в макете для достижения надлежащего требования.

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.