自定义 Jquery 插件错误

Question

我在 tuts+ 之后创建了一个简单的插件，并将其修改为我想要的。 它基本上创建了一个“工具提示”，我试图在一定时间内保持可见，但也允许用户单击块，因此更多的是通知而不是工具提示。到目前为止，我所拥有的如下，但是当它不自动隐藏时...单击以关闭工作。任何人都可以发现我做错了什么/改进了吗？

$.fn.betterTooltip = function(options){

    /* Setup the options for the tooltip that can be 
       accessed from outside the plugin              */
    var defaults = {
        speed: 200,
        delay: 300,
        hideAfter:5000
    };

    var options = $.extend(defaults, options);

    /* Create a function that builds the tooltip 
       markup. Then, prepend the tooltip to the body */
    getTip = function() {
        var tTip = 
        "<div class='tip'>" +
        "<div class='tipMid'>"  +
        "</div>" +
        "<div class='tipBtm'></div>" +
        "</div>";
        return tTip;
    }
    $("body").prepend(getTip());

    /* Give each item with the class associated with 
       the plugin the ability to call the tooltip    */
    $(this).each(function(){

        var $this = $(this);
        var tip = $('.tip');
        var tipInner = $('.tip .tipMid');

        var tTitle = (this.title);
        this.title = "";

        var offset = $(this).offset();
        var tLeft = offset.left;
        var tTop = offset.top;
        var tWidth = $this.width();
        var tHeight = $this.height();

        /* Delay the fade-in animation of the tooltip */
        setTimer = function() {
            $this.showTipTimer = setInterval("showTip()", defaults.delay);
        }
        hideTip=function(){
            stopTimer();
            tip.hide();
        }
        stopTimer = function() {
            clearInterval($this.showTipTimer);
            clearInterval( $this.hideTimer);
        }

        /* Position the tooltip relative to the class 
           associated with the tooltip                */
        setTip = function(top, left){
            var topOffset = tip.height()-30;
            var xTip = (left+60)+"px";
            var yTip = (top-topOffset)+"px";
            tip.css({
                'top' : yTip, 
                'left' : xTip
            });
        }

        /* This function stops the timer and creates the
           fade-in animation                          */
        showTip = function(){
            stopTimer();
            tip.animate({
                "top": "+=20px", 
                "opacity": "toggle"
            }, defaults.speed);
        }
        $(this).ready(function() {
            tipInner.html(tTitle+'<br />(Click to dismiss)');
            setTip(tTop, tLeft);
            setTimer();
            hideTimer=function(){
                $this.hideTimer=setInterval("hideTip()",defaults.hideAfter);
            }
            hideTimer();
        });
        $(tip).click(function() {
                hideTip();
        }); 
    });
};

Answer 1

我认为您想要 setTimeout 和 clearTimeout 而不是您拥有的 ...Interval 版本。前者触发一次回调，而后者重复执行。

一些提示：

1. 不要将字符串传递给setTimeout 或setInterval 以使代码运行 - 使用函数指针。我发现它更不容易出错，而且范围界定从来都不是问题。
2. 在mouseleave 事件中隐藏提示（从提示所针对的项目或提示本身），并在mouseover 或mouseenter 上显示。这比一直运行 javascript 更有效。