[英]Better way to write repetitive function?
我有一個導航功能,可以水平滾動我的網頁,它可以正常工作,但是我想它的書寫效果會更好。 有人可以建議我在邏輯上做些什么以最大程度地減少代碼嗎?
jQuery的
$('.sectionOne').click(function(e){
e.preventDefault();
$('nav').find('.active').removeClass('active');
$(this).addClass('active');
$('.scene').animate({
'marginLeft' : -$('.section-one').offset().left
});
});
$('.sectionTwo').click(function(e){
e.preventDefault();
$('nav').find('.active').removeClass('active');
$(this).addClass('active');
$('.scene').animate({
'marginLeft' : -$('.section-two').offset().left
});
});
$('.sectionThree').click(function(e){
e.preventDefault();
$('nav').find('.active').removeClass('active');
$(this).addClass('active');
$('.scene').animate({
'marginLeft' :-$('.section-three').offset().left
});
});
$('.sectionFour').click(function(e){
e.preventDefault();
$('nav').find('.active').removeClass('active');
$(this).addClass('active');
$('.scene').animate({
'marginLeft' : -$('.section-four').offset().left
});
});
$('.sectionFive').click(function(e){
e.preventDefault();
$('nav').find('.active').removeClass('active');
$(this).addClass('active');
$('.scene').animate({
'marginLeft' : -$('.section-five').offset().left
});
});
$('.sectionSix').click(function(e){
e.preventDefault();
$('nav').find('.active').removeClass('active');
$(this).addClass('active');
$('.scene').animate({
'marginLeft' : -$('.section-six').offset().left
});
});
$('.sectionSeven').click(function(e){
e.preventDefault();
$('nav').find('.active').removeClass('active');
$(this).addClass('active');
$('.scene').animate({
'marginLeft' : -$('.section-seven').offset().left
});
});
的HTML
<!-- Navigation -->
<nav>
<ol>
<li><a href="#" data-section="section-one" class="active sectionOne">1</a></li>
<li><a href="#" data-section="section-two" class="sectionTwo">2</a></li>
<li><a href="#" data-section="section-three" class="sectionThree">3</a></li>
<li><a href="#" data-section="section-four" class="sectionFour">4</a></li>
<li><a href="#" data-section="section-five" class="sectionFive">5</a></li>
<li><a href="#" data-section="section-six" class="sectionSix">6</a></li>
<li><a href="#" data-section="section-seven" class="sectionSeven">7</a></li>
</ol>
</nav>
看起來很多余。 怎么樣:
$('nav a').click(function(e){
e.preventDefault();
$('nav a.active').removeClass('active');
$(this).addClass('active');
$('.scene').animate({
'marginLeft' : -$('.' + $(this).attr('data-section')).offset().left
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.