javascript - 有没有办法将此 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');
});

正如您所看到的，除了事件处理程序所在的类以及内部或外部悬停之外，它们都是相同的......

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