Question

这就是事情：

我想要一个 jQuery 函数，允许我在以下任何一个时附加一个固定的popUp：

A。）发生了一个鼠标中心，之后popUp在以下鼠标上淡出并被删除，或者;
B。）当某个脚本专门调用它时，它会在指定时间后淡出并被删除。

不应该太难，我想。但是，因为涉及到fadeIn / Out（），所以有可能在第一个popUp真正消失之前调用另一个popUp的创建，使得整个事情以各种方式陷入混乱。所以问题是：如何设计一个创建和管理其创建元素的函数而不会让它们混淆？

现在，我想我会在附加的popUps的ID中添加一个变量ID值，这样fadeIn / Out调用只适用于正确的，但这不符合我的意图，因为当var增加 var ++; 时，该函数将永远不会操作ID值低于该var的popUp。

到目前为止，我已经创建了以下格式的内容，我希望能够正确地说明我正在考虑的内容：

var p1 = 0;
var p2 = 0;

function popUp(text, duration, targetLMN){

    if (duration  && !(targetLMN)) {

        $('body').append('<div id="popUpDur_'+p1+'" class="popUp" style="display:none;"> text </div>');

        // the following lines mess up as soon as another
        // popUp is created before the last one is gone.

        $('.popUpDur_'+p1).fadeIn(t).delay(duration).fadeOut(t, function(){
            $('.popUpDur_'+p1).remove();
        });

        p1++;
    }

    else if (targetLMN && !(duration)){

        $(targetLMN).mouseenter(function(){
            $('body').append('<div id="popUpTar_'+p2+'" class="popUp" style="display:none;"> text </div>');
            $('#popUpTar_'+p2).fadeIn(t);
        });

        $(targetLMN).mouseleave(function(){
            $('#popUpTar_'+p2).fadeOut(t, function(){
                $('#popUpTar_'+p2).remove();
            });
        });

        p2++;
    }
}

我无法理解！

提前致谢，SO！

Answer 1

不要生成要选择的id /类，只需保留对元素的引用。

// simplified example
var myEl = $("<div></div>").appendTo("body");
myEl.fadeIn(2000).delay(2000).fadeOut(2000,function(){
    myEl.remove();
});

类似的元素没有干扰

1 个答案: