jQuery 在事件之间传递变量

Question

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

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

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

    $(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);

});

jQuery 在事件之间传递变量

jQuery pass var between event

jquery

events

mouseevent