我尝试了解如何在 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/
最佳答案
您可以使用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 在事件之间传递 var，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31456883/