jquery - 如何在jquery中正确执行函数

Question

我很难让 jquery 函数按照我的意愿行事。我相信悬停处理程序已被多次注册，导致它反复触发，但我不确定如何正确执行。任何帮助将不胜感激。

function hoverOptions(target)
{
 var option = target.children('.option');
 var tooltip = option.children('.tooltip');

 option
 .fadeToggle(150, function() { console.log('option'); })
 .hover(function() { console.log('tooltip'); });
};

$(document).on('hover', '#myElement', function()                
{      
 $(hoverOptions($(this)));
});

Answer 1

我认为您正在注册此活动两次。

function hoverOptions(target)
{
 var option = target.children('.option');
 var tooltip = option.children('.tooltip');

 option
 .fadeToggle(150, function() {console.log('option');)} 
 .hover(function(){console.log('tooltip')});
};

$(document).on('hover', '#myElement', function()                
{
     hoverOptions($(this));
};

如果你想在 jQuery 命名空间中声明你的方法：

$.hoverOptions = function(target){ //Your code }

Answer 2

当您似乎想要调用它们时，您正在注册悬停事件。

此外，您仅将事件委托给一个元素。事件委托只是在事件涉及许多元素的情况下才真正是一个好主意。

尚不完全清楚您想要什么，但我对此进行了猜测（请注意简化的代码）。

//on hover to #myElement, fade toggle the .option child
$('#myElement').on('hover', function() {;
    $(this).children('.option').fadeToggle(150, function() {
        console.log('option');
    });
});

//on hover to .option elements, toggle the .tooltip child
$('.option').hover(function() { $(this).children('.tooltip').toggle(); });