我需要一些帮助来整合我的代码。这是工作代码,但当我尝试简化时似乎无法得到它。
我是用 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>