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

正如你所看到的那样，除了事件处理程序所在的类以及内部或外部_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');
});

我的原始代码只将该类添加到元素的悬停实例中，此版本将该类添加到hovered类的所有实例。

Answer 2

看起来你想要对每个元素发生同样的事情（我想象的是一种突出的交易类型），所以我会在你的所有元素中添加另一个类来调用它.foo然后我添加该类的悬停事件。

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

有没有办法将这个javascript重构为两个事件处理程序

2 个答案: