How do you create a jQuery function with multiple .click() functions within it?

Question

How or, what is a good approach for this function i'm trying to create?

my_script.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
     })


})

If an id in ["about","contact","district", "games", "membership"] - are clicked, i want to animate some stuff. But if id = "home", i want to animate (or don't animate if alreade on that page) it back.

Obviously, this code i posted doesen't work. But what kind of approach would you guys suggest? Should i put the id's for the banner to animate to the top of my page in an array and loop through it? (How does that look like) Or should i create many diffrent functions, one per id, like now?

/W

Answer 1

Assign a common class instead of using ids except home, as you have same code for all items other then 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;    
});

Answer 2

You can try like this

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

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

Answer 3

只需创建一个带有参数的函数，以便在单击时调用该函数并提供该位置的参数即可简化它

Answer 4

What you're seeing here is a better way to write the code above. You said that you do not want to animate .banner if you are already on that page ( or is this available only for home page? ) so the function will return false if the clicked item has class="active"

Note : i did not test the code because i don't have the rest of code.