javascript - 如何将 Jquery 合并为更清晰的格式

Question

我需要一些帮助来整合我的代码。这是工作代码，但当我尝试简化时似乎无法理解它。

我是用 jquery 编写的，而且我对 javascript 还是个新手。它基本上是一个循环，但我不确定如何循环它。

<script type="text/javascript">
// house_one
    $('.house_one')
    .mouseenter(function() {
      $('.box_one').addClass('hover');
    })
    .mouseleave(function() {
      $('.box_one').removeClass('hover');
    });
    $('.box_one')
    .mouseenter(function() {
      $('.house_one').addClass('house_hover');
    })
    .mouseleave(function() {
      $('.house_one').removeClass('house_hover');
    });
//house_two
    $('.house_two')
    .mouseenter(function() {
      $('.box_two').addClass('hover');
    })
    .mouseleave(function() {
      $('.box_two').removeClass('hover');
    });
            $('.box_two')
    .mouseenter(function() {
      $('.house_two').addClass('house_hover');
    })
    .mouseleave(function() {
      $('.house_two').removeClass('house_hover');
    });
// house_three
    $('.house_three')
    .mouseenter(function() {
      $('.box_three').addClass('hover');
    })
    .mouseleave(function() {
      $('.box_three').removeClass('hover');
    });
    $('.box_three')
    .mouseenter(function() {
      $('.house_three').addClass('house_hover');
    })
    .mouseleave(function() {
      $('.house_three').removeClass('house_hover');
    });
// house_four
    $('.house_four')
    .mouseenter(function() {
      $('.box_four').addClass('hover');
    })
    .mouseleave(function() {
      $('.box_four').removeClass('hover');
    });
    $('.box_four')
    .mouseenter(function() {
      $('.house_four').addClass('house_hover');
    })
    .mouseleave(function() {
      $('.house_four').removeClass('house_hover');
    });
// house_five
    $('.house_five')
    .mouseenter(function() {
      $('.box_five').addClass('hover');
    })
    .mouseleave(function() {
      $('.box_five').removeClass('hover');
    });
    $('.box_five')
    .mouseenter(function() {
      $('.house_five').addClass('house_hover');
    })
    .mouseleave(function() {
      $('.house_five').removeClass('house_hover');
    });
// house_six
    $('.house_six')
    .mouseenter(function() {
      $('.box_six').addClass('hover');
    })
    .mouseleave(function() {
      $('.box_six').removeClass('hover');
    });
    $('.box_six')
    .mouseenter(function() {
      $('.house_six').addClass('house_hover');
    })
    .mouseleave(function() {
      $('.house_six').removeClass('house_hover');
    });
// house_seven
    $('.house_seven')
    .mouseenter(function() {
      $('.box_seven').addClass('hover');
    })
    .mouseleave(function() {
      $('.box_seven').removeClass('hover');
    });
    $('.box_seven')
    .mouseenter(function() {
      $('.house_seven').addClass('house_hover');
    })
    .mouseleave(function() {
      $('.house_seven').removeClass('house_hover');
    });
// house_eight
    $('.house_eight')
    .mouseenter(function() {
      $('.box_eight').addClass('hover');
    })
    .mouseleave(function() {
      $('.box_eight').removeClass('hover');
    });
    $('.box_eight')
    .mouseenter(function() {
      $('.house_eight').addClass('house_hover');
    })
    .mouseleave(function() {
      $('.house_eight').removeClass('house_hover');
    });
</script>

Answer 1

只需使用 box 和 house 这两个类，所有这些都可以简化为:

$('.house').on('mouseenter mouseleave', function(){
  $(this).closest('.box').toggleClass('hover')
})

$('.box').on('mouseenter mouseleave', function(){
  $(this).closest('.house').toggleClass('house_hover')
})

编辑:

如果您的标记不适用于 closest()，因为元素不共享同一个容器，那么除了通用类之外还使用 id。

$('.house').on('mouseenter mouseleave', function(){
  // Assuming id = house_one (or two, three etc...)
  var id = this.id.split('_')[1]
  $('#box_'+ id).toggleClass('hover')
})