jQuery 在事件之间传递 var

Question

我尝试了解如何在 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/

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

Answer 1

您可以使用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);

});