jquery - jQuery在事件之间传递var

我试图了解如何在jQuery事件之间传递DOM。

例如，我创建了一个简单的工具提示插件，它在mouseenter上附加了一个div，我想在mouleave上删除相同的附加div。但是，如果我有多个悬停的元素，则无法选择要删除的正确元素。

这里是一个简单的示例代码：

    $(this).on('mouseenter', function() {

        $('<div class="'+options.class.split('.').join('')+'"></div>').appendTo('body').addClass(options.hoverClass.split('.').join(''));
        $tooltip = $(document).find(options.class).last();

    }).on('mouseleave', function() {

        $tooltip.first().removeClass(options.hoverClass.split('.').join(''));
        setTimeout(function() {
            $tooltip.first().remove(); // remove the right DOM appended for the element hovered
        },400);

    });

原始代码：http://fiddle.jshell.net/Lw4behcu/1/

编辑：工作提琴：http://fiddle.jshell.net/Lw4behcu/2/

最佳答案

您可以使用data()方法存储相关的工具提示：

$(this).on('mouseenter', function () {
    var $tooltip = $('<div class="' + options.class.split('.').join('') + '"></div>').appendTo('body').addClass(options.hoverClass.split('.').join(''));
    $(this).data('tooltip', $tooltip);


}).on('mouseleave', function () {
    var $tooltip = $(this).data('tooltip').removeClass(options.hoverClass.split('.').join(''));
    setTimeout(function () {
        $tooltip.remove(); // remove the right DOM appended for the element hovered
    }, 400);

});