循环 PHP 并使用 jQuery 定位

Question

我有这个工具提示功能：

//Tooltips
(function($) {
    $.fn.tooltips = function(html) {
        var $tooltip,
            $html;
        return this.each(function(data, html) {
            $html = $(html).attr("data-tooltip", data);
            var $tooltip = $('<div class="tooltip" data-tooltip="' + data + '">' + $html.attr('title') + '</div>').appendTo(".tip");
            $html.removeAttr("title").hover(function() {
                $html = $(this);
                $tooltip = $('div[data-tooltip=' + $html.data('tooltip') + ']');
                $tooltip.addClass("active");
            }, function() {
                $html = $(this);
                $tooltip = $('div[data-tooltip=' + $html.data('tooltip') + ']');
                setTimeout(function() {
                    $tooltip.removeClass("active");
                }, 100);
            });
        });
    }
})(jQuery);

$(function() {
    $("a.tip[title]").tooltips();
});

我有一个 PHP 循环：

echo '<span class="author-meta"><a class="author tip" id="'. $username .'" href="#" title="[Removed]">'. $username .'</a></span><br>';

目前当你将鼠标悬停在一个名字上时，所有的标题标签都会出现在所有的名字上。 有没有一种简单的方法，如果您将鼠标悬停在一个名字上 - 只有那个名字有悬停事件？

代码来自一个我似乎找不到的免费教程网站，但我不记得评论部分提到过这个特定问题，所以我很茫然！

Answer 1

您的代码错误在：

.appendTo(".tip")

这是将工具提示附加到具有 class="tip" 的所有元素。您应该只附加到当前元素。第8行的代码应该是：

var $tooltip = $('<div class="tooltip" data-tooltip="' + data + '">' + $html.attr('title') + '</div>').appendTo(this);

循环 PHP 并使用 jQuery 定位

Loop through PHP and target with jQuery

php

jquery

loops