有沒有辦法來重構這段JavaScript到兩個事件處理

$('.main').on('mouseleave', '.left_inner_element', function(event){ 
    $('.left_inner_element').removeClass('inner_hover'); 
}); 

$('.main').on('mouseover', '.right_element', function(event){ 
    $('.right_element').addClass('outer_hover'); 
}); 

$('.main').on('mouseleave', '.right_element', function(event){ 
    $('.right_element').removeClass('outer_hover'); 
}); 

$('.main').on('mouseover', '.right_inner_element', function(event){ 
    $('.right_inner_element').addClass('inner_hover'); 
}); 

$('.main').on('mouseleave', '.right_inner_element', function(event){ 
    $('.right_inner_element').removeClass('inner_hover'); 
}); 

$('.main').on('mouseover', '.bottom_element', function(event){ 
    $('.bottom_element').addClass('outer_hover'); 
}); 

$('.main').on('mouseleave', '.bottom_element', function(event){ 
    $('.bottom_element').removeClass('outer_hover'); 
});

正如你可以看到他們都是一樣的，然後其他類的事件處理程序上和內部或outer_hover ...有沒有辦法來重構這段JavaScript到兩個事件處理

來源

2013-06-18 Trace

爲什麼不只是將來自「mouseleave」處理程序的所有代碼行合併爲一個代碼行，並且「mouseover」代碼行也一樣？ – Pointy

每個類都有一個mouseleave和一個mouseover事件，它設置了一個導致在多個元素上懸停的類.... @ Pointy - 我該怎麼做 – Trace

爲什麼會有'outer_hover'和'inner_hover'類？你可以改變爲單個類'懸停'並應用不同的樣式，如'.bottom_element.hover {} .right_inner_element.hover {}'，等等？ – Andre

它看起來就像你想讓每個元素都發生同樣的事情（我想象的是一種突出類型的交易），所以我會在所有元素中添加另一個類讓我們稱之爲.foo然後，我會爲該類添加懸停事件。

$('.foo').hover(function(){ 
    $(this).toggleClass('outer_hover') 
    $(this).toggleClass('inner_hover') 
}, function(){ 
    $(this).toggleClass('outer_hover') 
    $(this).toggleClass('inner_hover') 
});

來源

2013-06-18 20:32:09 Psych0Mantis

這應該爲你工作：

$('.main').on('mouseenter mouseleave', '.left_inner_element, .right_inner_element', function(e){  
    var selector = $(this).hasClass('.left_inner_element') ? '.left_inner_element' : '.right_inner_element'; 
    $(selector).toggleClass('inner_hover'); 
}); 

$('.main').on('mouseenter mouseleave', '.right_element, .bottom_element', function(e){ 
    var selector = $(this).hasClass('.right_element') ? '.right_element' : '.bottom_element'; 
    $(selector).toggleClass('outer_hover'); 
});

我原來的代碼只添加類元素的懸停的情況下，這個版本增加了類懸停類的所有實例。

來源

2013-06-18 20:34:11 Joe

有沒有辦法來重構這段JavaScript到兩個事件處理

回答

相關問題