兩個互相干擾的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"); 
    } 
});