写重复函数的更好方法

Better way to write repetitive function?

本文关键字：更好 方法 函数      更新时间：2023-09-26

我有一个导航功能，我已经创建滚动我的网页水平，这工作得很好，但我猜它可以写得更好。谁能给我建议，我可以做什么逻辑明智的最小化我的代码?

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


<!-- 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
    });       
});
相关文章：