[英]How to consolidate Jquery into cleaner format
我需要一些幫助來鞏固我的代碼。 這是工作代碼,但是當我嘗試簡化時,我似乎無法得到它。
我用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>
只需使用兩個類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')
})
function setupHovers(house, box){
house = $(house);
box = $(box);
house.hover(function(){ box.toggleClass('hover'); });
box.hover(function(){ house.toggleClass('house_hover'); });
}
boxHouseArray = ['one','two','three','four','five','six' ...]; //
for(boxHouse in boxHouseArray){
setupHovers('.house_'+boxHouse, '#box_'+boxHouse);
}
或者甚至更好地改變你的標記:
<a href="/interiors/house_1" class="house_list">House 04</a>
and
<div class="box"></div>
現在你可以這樣:
var houses = $('.house_list'), boxes = $('.box');
houses.hover(function(){
boxes.eq( houses.index(this) ).toggleClass('hover');
});
boxes.hover(function(){
houses.eq( boxes.index(this) ).toggleClass('house_hover');
});
這里的想法是沒有額外的id或標記,我們只是使用標記中元素的順序作為我們的配置。 讓我們說我們鼠標懸停在第一個框: index(this)
將告訴我們它是否是頁面上的第一個框並通過eq
觸發第一個房子上的懸停類
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.