Javascript 没有干扰的相似元素

事情是这样的：

我想要一个jQuery函数，它允许我在以下任一情况下附加一个固定的弹出窗口：

• A.）鼠标指针出现，之后弹出窗口在随后的鼠标移动中淡出并被删除，或者
• B.）当某个脚本特别调用它时，在指定时间后它会淡出并被删除

应该不会太难，我想。但是，由于涉及到fadeIn/Out（），因此可能会在第一个弹出窗口真正消失之前调用另一个弹出窗口的创建，从而以各种方式将整个过程搞得一团糟。所以问题是：我如何设计一个函数来创建和管理其创建的元素而不混淆它们？

现在，我想我应该在附加的弹出窗口的ID中添加一个变量ID值，这样fadeIn/Out调用只适用于正确的弹出窗口，但这并没有按照我的预期工作，因为当var增加var++该函数永远不会操作ID值低于该变量的弹出窗口

到目前为止，我已经创建了以下格式的东西，我希望它能正确地说明我的想法：

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++;
    }
}

var p1=0；
var p2=0；
功能弹出窗口（文本、持续时间、targetLMN）{
如果（持续时间和！（目标时间））{
$（'body'）。追加（'text'）；
//下面的几行一行又一行就搞乱了
//在最后一个弹出窗口消失之前创建弹出窗口。
$（'.popUpDur_'+p1）.fadeIn（t）.delay（duration）.fadeOut（t，function（）{
$（'.popUpDur_'+p1）.remove（）；
});
p1++；
}
else if（targetLMN&！（持续时间））{
$（targetLMN）.mouseenter（函数（）{
$（'body'）。追加（'text'）；
美元(popUpTar)+p2.fadeIn(t);；
});
$（targetLMN）.mouseleave（函数（）{
$（'#popUpTar'+p2）.fadeOut（t，function（）{
$（'#popUpTar'+p2）.remove（）；
});
});
p2++；
}
}

我就是搞不懂

---

提前谢谢，所以

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

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

//简化示例
var myEl=$（“”）。appendTo（“body”）；
迈尔.法代因（2000）.延迟（2000）.衰减（2000，函数（）{
myEl.remove（）；
});

它们不需要唯一的类/id，您可以通过

$（这）

引用当前正在使用的类。但是，当用“mouseenter方法”而不是“duration方法”创建一个新的弹出窗口时，这不会弄糟吗？不会，因为两者都不能访问相同的

myEl

。通过这种方式编写，它们完全独立于彼此和每个实例。然而，鼠标弹出窗口不会消失。。！在应用我的想法后，你能对你当前的代码做一个粘贴箱吗？忽略最后的评论：我没有正确声明myEl，所以mouseleave无法访问它。它起作用了！万分感谢！