1

私が作成しようとしているこの関数の良いアプローチはどのように、または何ですか?

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


})

["about","contact","district", "games", "membership"] の id がクリックされた場合、いくつかのものをアニメーション化したいと思います。しかし、id = "home" の場合は、アニメーション化したい (または、既にそのページにある場合はアニメーション化しません)。

明らかに、私が投稿したこのコードは機能しません。しかし、あなたはどのようなアプローチを提案しますか？ページの上部にアニメーション化するバナーの ID を配列に入れてループする必要がありますか? (それはどのように見えますか) または、今のように id ごとに 1 つずつ、多くの異なる関数を作成する必要がありますか?

/W

4

4 に答える 4

1

ホーム以外のすべてのアイテムに同じコードがあるため、ホーム以外classを使用する代わりにコモンを割り当てます。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;    
});
于 2013-03-21T10:57:00.290 に答える
1

このように試すことができます

$("#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;
 });
于 2013-03-21T11:01:04.710 に答える
0

ここに表示されているのは、上記のコードをより適切に記述する方法です。すでにそのページにいる場合はアニメーション化したくないと言って.bannerいました（または、これはホームページでのみ利用できますか？）したがって、クリックされたアイテムがclass="active"

注：残りのコードがないため、コードをテストしませんでした。

于 2013-03-21T11:16:25.087 に答える
0

パラメーターを使用して関数を作成するだけなので、クリックすると関数が呼び出され、位置のパラメーターが与えられ、単純化されます

于 2013-03-21T11:02:30.473 に答える