javascript - 如何创建一个包含多个 .click() 函数的 jQuery 函数？

Question

如何或什么是我尝试创建的这个功能的好方法？

我的脚本.js

$(document).ready(function() {


     $("#home").click(function() {
         $('.banner').animate({top:'370px', height:'250px', }, 1000)
         return false    
     })

     $("#about").click(function() {
         $('.banner').animate({top:'20px', height:'145px', }, 1000)
         return false
     })


     $("#games").click(function() {
         $('.banner').animate({top:'20px', height:'145px', }, 1000)
         return false
     })

     $("#district").click(function() {
         $('.banner').animate({top:'20px', height:'145px', }, 1000)
         return false
     })

     $("#contact").click(function() {
         $('.banner').animate({top:'20px', height:'145px', }, 1000)
         return false
     })


})

如果点击 ["about","contact","district", "games", "membership"] 中的一个 id - 被点击，我想制作一些动画。但是，如果 id = "home"，我想对其进行动画处理(或者如果已经在该页面上则不进行动画处理)。

显然，我发布的这段代码不起作用。但是你们会建议什么样的方法呢？我是否应该将横幅的 id 放在数组中的页面顶部并循环遍历它？ (这看起来怎么样)或者我应该像现在一样创建许多不同的函数，每个 id 一个？

/W

Answer 1

分配一个通用的 class 而不是使用 ids 除了 home，因为除了 home 之外的所有元素都有相同的代码。

$("#home").click(function() {
    $('.banner').animate({top:'370px', height:'250px', }, 1000)
     return false;    
});

$(".commonclassexcepthome").click(function() {
     $('.banner').animate({top:'370px', height:'250px', }, 1000)
     return false;    
});