如何在其中具有多個.click（）函數的情況下創建jQuery函數？

Question

或者，對於我要創建的此功能，有什么好的方法？

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


})

如果單擊[“關於”，“聯系人”，“區域”，“游戲”，“成員資格”]-中的ID，我想制作一些動畫。 但是，如果id =“ home”，我想對其進行動畫處理（如果已經在該頁面上，則不要進行動畫處理）。

顯然，我發布的此代碼不起作用。 但是你們會建議什么樣的方法？ 我是否應該將橫幅的ID設置為數組中頁面頂部的動畫並循環遍歷？ （看起來如何）還是應該像現在一樣創建許多不同的功能，每個id一個？

/ W

Answer 1

分配一個公共class而不使用除home之外的ids ，因為除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

你可以這樣嘗試

$("#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

您在這里看到的是編寫上面代碼的更好方法。 您說過，如果您已經在該頁面上，則不希望對其進行動畫.banner （或者這僅可用於主頁？），因此，如果單擊的項目具有class="active" ，該函數將返回false。

注意：我沒有測試代碼，因為我沒有其余的代碼。