Question

我正在尝试概括我用来滚动到项目的不同部分的滚动功能。一切都工作，但我使用了很多重复的代码，我想看看是否有任何方法使jQuery方法更动态，所以我只能使用一种方法而不是固定方法。

的header.php：

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">

    </div>
    <div>
      <ul class="nav navbar-nav navbar-right">
      <li id="about-scroll"><a href="#">Profile</a></li>  
      <li id="proj-scroll"><a href="#">Projects</a></li>  
      <li id="work-scroll"><a href="#">Work</a><li>
      <li id="abilities-scroll"><a href="#">Abilities</a><li>
      <li id="contact-scroll"><a href="#">Contact</a></li> 
      </ul>
    </div>
  </div>
</nav>

index.php：

<?php
include("header.php"); 
?>

<div class="jumbotron">
  <div class="container">
      <h1>Allan Araujo</h1>      
      <p>Interactive Resume</p>
  </div>
</div>

<section class="about">
 <?php include("about.php"); ?>
</section>

<section class="projects">
  <?php include("projects.php"); ?>
</section>

<section class="work">
  <?php include("work.php"); ?>
</section>

<section class="skills">
    <?php include("skills.php"); ?>
</section>

<section class="contact">
  <?php include("contact.php"); ?>
</section>

</div> <!--END MAIN CONTAINER-->
  <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
  <script type="text/javascript" src="js/script.js"></script>

</body>
</html>

最后，script.js：

$('#about-scroll').click(function() {
    $('html, body').animate({
        scrollTop: $('.about').offset().top
    }, 2000);
});

$('#proj-scroll').click(function() {
    $('html, body').animate({
        scrollTop: $('.projects').offset().top
    }, 2000);
});

$('#contact-scroll').click(function() {
    $('html, body').animate({
        scrollTop: $('.contact').offset().top
    }, 2000);
});

$('#work-scroll').click(function() {
    $('html, body').animate({
        scrollTop: $('.work').offset().top
    }, 2000);
});

$('#abilities-scroll').click(function() {
    $('html, body').animate({
        scrollTop: $('.skills').offset().top
    }, 2000);
});

正如你所看到的，我基本上使用了相同的代码片段5次，当我真的想要优化它只使用一个函数时。这段代码和结构工作正常，但我想优化是因为我没有多次使用同一段代码。

有没有办法构建我的类/ ID，以便我可以使它更通用。我是设计/ javascript的新手。目前我的结构有点乱，我想我可能要改变我的类或id名称，以便我可以将它们作为可传递的变量用于方法？

Answer 1

我会用两个步骤简化这个。

步骤1.将公共代码移动到函数

var scrollHandler = function() {
   $('html, body').animate({
        scrollTop: $(this).offset().top
    }, 2000);
}
$('#about-scroll').click(scrollHandler);
$('#proj-scroll').click(scrollHandler);
$('#contact-scroll').click(scrollHandler);
$('#work-scroll').click(scrollHandler);
$('#abilities-scroll').click(scrollHandler);

步骤2.不是逐个将功能分配给每个控件，而是根据某些属性

进行分配

不是通过名称引用控件，而是为每个控件指定一个假样式（例如“scrollable”）并使用一个jquery语句赋值：

HTML：

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
    </div>
    <div>
      <ul class="nav navbar-nav navbar-right">
      <li id="about-scroll" class="scrollable"><a href="#">Profile</a></li>  
      <li id="proj-scroll" class="scrollable"><a href="#">Projects</a></li>  
      <li id="work-scroll" class="scrollable"><a href="#">Work</a><li>
      <li id="abilities-scroll" class="scrollable"><a href="#">Abilities</a><li>
      <li id="contact-scroll" class="scrollable"><a href="#">Contact</a></li> 
      </ul>
    </div>
  </div>
</nav>

JQuery的：

$('.scrollable').click(scrollHandler);

纯粹主义者可能更喜欢在样式类上使用数据属性。

Answer 2

这应该有用。

根据您的代码，我定位了容器流体li。然后，如果单击任何列表项，我将获取元素id的id并将其分配给变量。然后，当我匹配一个区域时，我通过switch语句运行该变量，然后分配一个类并将该类传递给运行jQuery滚动动画的函数。

   $('.container-fluid li').click( function(){
       var getClicked = $(this).attr(id);
       switch (getClicked){
           case 'about-scroll':
               var setlocal = 'about';
               scrollAni(setlocal);
               break;
           case 'proj-scroll':
               var setlocal = 'projects';
               scrollAni(setlocal);
               break;
           case 'work-scroll':
               var setlocal = 'work';
               scrollAni(setlocal);
               break;
           case 'abilities-scroll':
               var setlocal = 'skills';
               scrollAni(setlocal);
               break;
           case 'contact-scroll':
               var setlocal = 'contact';
               scrollAni(setlocal);
               break;
       }
   }

这是我设置执行jQuery滚动的功能。我们使用local作为函数占位符传递类的名称。

function scrollAni(local){
    $('html, body').animate({
        scrollTop: $('.'+local+'').offset().top;
    }, 2000);
}

概括jQuery滚动方法

2 个答案:

步骤1.将公共代码移动到函数

步骤2.不是逐个将功能分配给每个控件，而是根据某些属性