两个互相干扰的jquery函数

Question

我有2个jQuery的函数做类似的事情（一个用于鼠标悬停，另一个用鼠标点击），它们似乎互相干扰。第一个使用悬停的jquery ui switchclass更改背景。这也会带来一个子菜单。当你点击子菜单中的链接时，它会触发一个删除前一个菜单的点击功能。并使用switchclass更改该背景。问题是，只要您移动鼠标，它就会触发鼠标并将背景更改回默认背景。

这是鼠标悬停。

 $('.hoverbg').mouseover(
    function(){ 
    var newimg = $(this).attr('data-bgsrc'); 
    $('#bg img[src="'+newimg+'"]').switchClass("inactive", "active", 0, "easeInOutQuad"); 
    $('#bg img[src!="'+newimg+'"]').switchClass("active", "inactive", 0, "easeInOutQuad"); 
    }); 
$('.nav').mouseout 
(function(){ 
    if ($('#sitewrapper').hasClass("c")) 
    { 
     event.stopImmediatePropagation() 
    } 
    else 
    { 
     $('#bg img[src="images/bg.jpg"]').switchClass("inactive", "active", 0, "easeInOutQuad"); 
     $('#bg img[src!="images/bg.jpg"]').switchClass("active", "inactive", 0, "easeInOutQuad"); 
    } 
    }); 

这里是点击事件。它隐藏了作为mouseout一部分的nav类。从技术上讲，我想这已经让你的菜单鼠标，但我有它添加一个类的sitewrapper div和停止，如果类是存在的。

$('a#navclick').click(function(){ 
var iclick = $(this).attr('data-iclick'); 
var clickimg = $(this).attr('click-data-bgsrc'); 
if ($('#topId').hasClass('.topOn')) 
{ 
    $('#bg img[src="'+clickimg+'"]').switchClass("inactive", "active", 0, "easeInOutQuad"); 
    $('#bg img[src!="'+clickimg+'"]').switchClass("active", "inactive", 0, "easeInOutQuad"); 
} 
else 
{ 
$('#sitewrapper').addClass("c"); 
$('img.logo').hide("drop", {direction: "down"}, 1000); 
$('.nav').hide("drop", {direction: "down"}, 1000); 
$('#bg img[src="'+clickimg+'"]').switchClass("inactive", "active", 0, "easeInOutQuad"); 
$('#bg img[src!="'+clickimg+'"]').switchClass("active", "inactive", 0, "easeInOutQuad"); 
$('#topId').addClass('topOn'); 
$('#topId').show("slide", {direction:"up"}, 1000); 
} 
}); 

Answer 1

我想通了。点击功能很好，看起来像这样;

$('a#navclick').click(function(){ 
var iclick = $(this).attr('data-iclick'); 
var clickimg = $(this).attr('click-data-bgsrc'); 
if ($('#topId').hasClass('topOn')) 
{ 
    $('#bg img[src="'+clickimg+'"]').switchClass("inactive", "active", 0, "easeInOutQuad"); 
    $('#bg img[src!="'+clickimg+'"]').switchClass("active", "inactive", 0, "easeInOutQuad"); 
} 
else 
{ 
$('#topId').addClass('topOn'); 
$('img.logo').hide("drop", {direction: "down"}, 1000); 
$('.nav').hide("drop", {direction: "down"}, 1000); 
$('#bg img[src!="'+clickimg+'"]').switchClass("active", "inactive", 0, "easeInOutQuad"); 
$('#bg img[src="'+clickimg+'"]').switchClass("inactive", "active", 0, "easeInOutQuad"); 
$('#topId').show("slide", {direction:"up"}, 1000); 
} 
}); 

悬停功能需要一个if语句来停止它，一旦发生点击。所以我有点击事件添加一个类到一个div，变得可见称为topOn。然后添加一个if语句来检查该div是否有一个topOn类。它看起来像这样;

 $('.hoverbg').mouseenter(
    function(){ 
    var newimg = $(this).attr('data-bgsrc'); 
    $('#bg img[src="'+newimg+'"]').switchClass("inactive", "active", 0, "easeInOutQuad"); 
    $('#bg img[src!="'+newimg+'"]').switchClass("active", "inactive", 0, "easeInOutQuad"); 
    }); 
$('.hoverbg').mouseleave 
(function(){ 
    if(jQuery('#topId').hasClass('topOn')) 
    { 
    jQuery('.hoverbg').stop(); 
    } 
    else 
    { 
    $('#bg img[src="images/bg.jpg"]').switchClass("inactive", "active", 0, "easeInOutQuad"); 
    $('#bg img[src!="images/bg.jpg"]').switchClass("active", "inactive", 0, "easeInOutQuad"); 
    } 
});