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").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

您所看到的内容here是编写上述代码的更好方式。您说如果您已经在该页面上（或者仅适用于主页？），您不想为.banner设置动画。因此如果点击的项目有class="active"

注意：我没有测试代码，因为我没有剩下的代码。

如何在其中创建具有多个.click（）函数的jQuery函数？

4 个答案: