有沒有一種方法可以將此JavaScript重構為兩個事件處理程序

Question

$('.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');
});

如您所見，除了事件處理程序所在的類以及inner或external_hover以外，它們都是相同的。

Answer 1

這應該為您工作：

$('.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');
});

我的原始代碼僅將類添加到了元素的懸停實例，此版本將類添加到了懸停類的所有實例。

Answer 2

看來您希望每個元素都發生相同的事情（我正在想像一種突出顯示的交易類型），因此我將在所有元素中添加另一個類，讓其稱為.foo然后再添加懸停事件對於那個班。

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